/* Author: thewebmax team
=========================
This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.
This files [Table of contents] are outlined below

/* ---------------------------------------------------*/

/* ---------------------------------------------------*/

/** - Center title */
/** - Rotate text img */
/** - Play Button */
/** - Client logo section */
/** - Footer dark version */
/** - Newsletter */
/** - Newsletter form */
/** - Widget address */
/** - Widget services */
/** - Scroll top btn css */
/** - Inner page banner */
/** - Breadcrumb */
/** - Form control */
/** - Error Page */
/** - Blog side bar */
/** - Comment list */
/** - Comment form */
/** - Single blog post */
/** - Single post navigation */
/** - Loading */
/** - Loading animation start */
/** - Section overlay */
/** - Video */
/** - Search bar */
/** - Cart dropdown */
/** - Project btn filter */
/** - Swiper Controls */
/** - Swiper nav bottom center position */
/** - Blog gallery */
/** - Product box */
/** - Product detail page slider */
/** - Price range tool tip */
/** - Select box border style1 */
/** - Touchspin input type number */
/** - Spin animation */
/** - Pagination */
/** - Circle text section */
/** - Circle text */
/** - Marquee slider */
/** - Start  curser pointer Css */
/** - Accordians */
/** - Sidbar popup Css */
/** - Side Panel */
/** - Balloon animation */
/** - Destination Bx 1 */
/** - Social style 1 */
/** - Footer dark version css */
/** - Animated car section */
/** - Tyre Spin */
/** - Newsletter */
/** - Tv booking step style1 start */
/** - Tv booking step style2 */
/** - Tv guide style 1 */
/** - Tour guide detail */
/** - Tour guide detail */
/** - Tv testimo style1 start */
/** - Tv testimo style2 start */
/** - We Recommend 2 section start */
/** - We Recommend 2 section End */
/** - Video with acchivment section start */
/** - Video with acchivment section end */
/** - Counter style 2 */
/** - Counter style 3 */
/** - We offer services */
/** - Scale up animation */
/** - Slide left animation */
/** - Service Bx1 */
/** - Popular search destination */
/** - Explore popular tour */
/** - Explore popular tour style 2 Start */
/** - Explore popular tour style 2 End */
/** - Tour List Style */
/** - Tv adventure style 1 start */
/** - All blog section start */
/** - Banner Style 1 */
/** - 3 STEP SECTION START */
/** - Tour Category SLIDER */
/** - Most Favorite Tour */
/** - Search style 1 */
/** - Banner Style 2 */
/** - Search Style 2 */
/** - Tv step style 2 start */
/** - Tv pricing style 3 start */
/** - Price table 2 */
/** - Price table 3 */
/** - Tv contact form style 1 start */
/** - Blog Style 2 */
/** - Gallery Section */
/** - Trending Destinations */
/** - Project Btn Filter */
/** - Banner Style 2 */
/** - Tv service style 1 start */
/** - Gallery */
/** - Destination Details */
/** - Tour Guide Carousal */
/** - Guide Srvice Detils */
/** - Faq Media Section */
/** - Contact Form two Wrap */
/** - Gallery Rev SLider */
/** - Contact Us Page */
/** - Google Map */
/** - Blog List STyle */
/** - Side Bar Elements */
/** - Search Style 2 */
/** - Bootstrap Select CSS */

/* ---------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import "media-queries";
@import "variables";
@import "general";
@import "header1";
@import "header2";
@import "header3";

@media (min-width: 1200px){
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 1320px;
	}
}

/** - Center title */
.trv-column-style-head{
	display: flex;
	align-items: center;
	margin-bottom: 60px;
	.section-head.trv-head-title-wrap{margin-bottom: 0px;}
	.section-head.trv-head-title-wrap.left-position{
		.trv-head-discription{
			margin-bottom: 0px;
			@include breakpoint-991{
				margin-bottom: 30px;
			}
		}
	}
	.trv-column-style-head-btn{
		text-align: right;
		@include breakpoint-991{
			text-align: left;
		}
	}
}
.section-head{

	&.trv-head-title-wrap{
		margin-bottom: 60px;
		@include breakpoint-768{
			margin-bottom: 30px;
		}
		.trv-head-title{
			font-family: $heading-font;
			color: $clr-primary;
			font-size: 46px;
			font-weight: 700;
			margin-bottom: 10px;
			@include breakpoint-1024{
				font-size: 40px;
			}
			@include breakpoint-768{
				font-size: 30px;
			}
		}
		.trv-head-title-image{
			margin-top: -28px;
			img{
				width: 470px;
			}
		}
		.trv-head-discription{
			font-size: 16px;
		}
		&.center-position{
			text-align: center;
			max-width: 600px;
			margin-left: auto;
			margin-right: auto;
		}
		&.left-position{
			text-align: left;
			@include breakpoint-991{
				margin-bottom: 30px;
			}
			.trv-head-title{
				margin-bottom: 14px;
			}
			.trv-head-discription{
				margin-bottom: 50px;
				@include breakpoint-991{
					margin-bottom: 30px;
				}
			}
		}
		&.with-bg-dark{
			.trv-head-title{
				color: $clr-white;
			}
			.trv-head-discription{
				color: $bgcolor2;
			}
		}
	}
}

/** - Rotate text img */
.rotate-center{
	animation: rotate-center 10s linear infinite both;
}

@keyframes rotate-center{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}

/** - Play Button */
.play-now-video{
	.icon{
		position: absolute;
		left: 50%;
		top: 50%;
		height: 65px;
		width: 65px;
		text-align: center;
		line-height: 65px;
		background-color:rgba(255, 255, 255,0.3);
		backdrop-filter: blur(5px);
		color:$clr-white;
		z-index: 1;
		font-size: 18px;
		padding-left: 5px;
		display: block;
		transform: translateX(-50%) translateY(-50%);
		transform-origin: center center;
		border-radius: 50%;
		box-shadow: 0 5px 10px 0 rgba(255, 255, 255, 0.5);
	}

	.ripple {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 65px;
		width: 65px;
		transform: translateX(-50%) translateY(-50%);
		transform-origin: center center;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgb(255, 255, 255);
		animation: ripple-video 3s infinite;
		z-index: 1;
		&:before {
			top: 50%;
			left: 50%;
			height: 65px;
			width: 65px;
			transform: translateX(-50%) translateY(-50%);
			transform-origin: center center;
			border-radius: 50%;
			box-shadow: 0 0 0 0 rgb(255, 255, 255);
			animation: ripple-video 3s infinite;
			z-index: 1;
			animation-delay: .9s;
			content: "";
			position: absolute;
		}
		&:after {
			position: absolute;
			top: 50%;
			left: 50%;
			height: 65px;
			width: 65px;
			transform: translateX(-50%) translateY(-50%);
			transform-origin: center center;
			border-radius: 50%;
			box-shadow: 0 0 0 0 rgb(255, 255, 255);
			animation: ripple-video 3s infinite;
			z-index: 1;
			animation-delay: .6s;
			content: "";
		}
	}
}
	
@keyframes ripple-video{
	70%{box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);}
	100%{box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}
.ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 65px;
	width: 65px;
	transform: translateX(-50%) translateY(-50%);
	transform-origin: center center;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgb(255, 255, 255);
	animation: ripple-video 3s infinite;
	z-index: 1;
	&:before {
		top: 50%;
		left: 50%;
		height: 65px;
		width: 65px;
		transform: translateX(-50%) translateY(-50%);
		transform-origin: center center;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgb(255, 255, 255);
		animation: ripple-video 3s infinite;
		z-index: 1;
		animation-delay: .9s;
		content: "";
		position: absolute;			
	}
	&:after {
		top: 50%;
		left: 50%;
		height: 65px;
		width: 65px;
		transform: translateX(-50%) translateY(-50%);
		transform-origin: center center;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgb(255, 255, 255);
		animation: ripple-video 3s infinite;
		z-index: 1;
		animation-delay: .6s;
		content: "";
		position: absolute;
	}
}
@keyframes ripple-video{
	70%{box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1);}
	100%{box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
}

/** - Client logo section */
.trv-client-titlesection{
	@include breakpoint-1199{
		margin-bottom:30px;
		text-align: center;
	}
	.trv-head-title{
		margin-bottom: 0px;
		font-family:$heading-font;
		color:$clr-primary;
		font-size: 46px;
		font-weight: 700;
		line-height: 1;
		@include breakpoint-768{
			font-size: 30px;
		}
		span{
			display: block;
			font-size: 48px;
			font-weight: 900;
			font-family: $font-style2;
			line-height: 1;
			
		}
	}
}
.trv-client-section{
	padding: 20px;
	background-color: $bgcolor2;
	.trv-client-row{
		padding: 20px 0px;
		background-color: $clr-white;
		box-sizing: border-box;
		border: 4px dashed $bgcolor2;
	}
}

.trv-client-carousel{
	> .row{
		display: flex;
		align-items: center;
	}
	.client-logo{
		text-align: center;
		img{
			width: auto;
			height: 45px;
			margin: 0px auto;
			opacity: 0.4;
			
		}
	}
}

/** - Footer dark version */
.footer-dark{
	padding-top: 80px;
	background-color:$clr-primary;
	color: $common-font-color;
	background-image: url(../images/background/ftr-dark-bg.png);
	background-size: cover;
	.logo-footer{
		margin-bottom: 40px;
		text-align: center;
		display: block;
		max-width: 193px;
	}
	.footer-top{
  		padding: 80px 0px 0px 0px;
		color: rgba(255,255,255,0.6);
		border-bottom: 1px solid $clr-primary;
		@include breakpoint_991{
			padding: 50px 0px 0px 0px;
		}
	}
	.f-top-space{
		padding-top: 0px;
	}
	.call-us{
		padding: 10px 20px 10px 0;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		font-family: $font-style2;
		@include breakpoint_991{
			margin: 15px 0;
		}
		i{display: block;font-size: 42px;line-height: 42px;margin-right: 10px;}
		a{
			display: block;
			color: $clr-primary;
			font-size: 32px;
			line-height: 32px;
			font-family: $font-style2;
			@include breakpoint_767{
				font-size: 22px;
				line-height: 22px;
			}
		}
	}
	.widget_about{
		p{
			padding-right: 50px;
			font-size: 16px;
		}
	}
	.widget-title{
		font-family: $heading-font;
		color: $clr-white;
		font-size: 28px;
		margin-bottom: 30px;
		position: relative;
		@include breakpoint_767{
			font-size: 22px;
		}
	}
	
	.footer-bottom{
		padding: 40px 0px;
		color: $clr-white;
		position: relative;
		z-index: 1;
		font-weight: 400;
		&:after{
			content: '';
			position: absolute;
			background-color: $clr-primary;
			max-width: 540px;
			height: 1px;
			left: 50%;
			top: 0px;
			transform: translateX(-50%);
		}
		.copyrights-text {
			text-align: center;
			font-size: 14px;
			font-weight: 600;
			span{
				display: inline-block;
				text-transform: uppercase;
			}

		}

	}
	.copyrights-nav{
		list-style: none;
		display: block;
		margin-bottom: 0;
		li{
			display: inline-block;
			margin-right: 8px;
			&:first-child {
				margin-left: 0;
			}
			&:last-child{
				margin-right: 0;
				&:after {
					display: none;
				}
			}
			&:after{
				content: "/";
				position: relative;
				right: -8px;
				color: $clr-white;
			}
			a{
				color: $clr-white;
				font-size: 14px;
				&:hover{
					color: $clr-primary;
				}
				&:active{
					color: $clr-primary;
				}
				&:focus{
					color: $clr-primary;
				}
			}
		}
		li.active{
			a{
				color: $clr-white;
			}
		}
	}
	.widget_address{
		li{
			i{
				font-weight: 400;
			}
		}
	}
	@include breakpoint-991{
		.widget{
			margin-bottom: 20px;
		}
	}

	@include breakpoint-540{
		.col-4{
			width: 50%;
		}
	}

}

/** - Newsletter */
.trv-subscribe-nl{
	margin-top: -80px;
	position: relative;
	z-index: 1;
	&:after{
		content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		height: 80px;
		background-color: $bgcolor2;
		z-index: -1;
	}
	.container{
		background-color: $clr-yellow;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25px 70px;
		max-width: calc(1320px - 24px);
		@include breakpoint-767{
			display: block;
		}
		@include breakpoint-460{
			padding: 30px;
			border-radius: 0px;
		}
		.trv-left-section{
			padding-right: 20px;
			@include breakpoint-991{
				width: 50%;
			}
			@include breakpoint-767{
				width: 100%;
			}
			@include breakpoint-420{
				padding-right: 0px;
			}
		}

	}
	.trv-nl-large-text{
		color: $clr-primary;
		font-family: $font-style3;
		font-size: 80px;
		line-height: 0.75;
		text-shadow: 2px 3px 0px rgba(255, 255, 255, 0.72);
		padding-bottom: 20px;
		span{
			color: $clr-white;
			display: inline-block;
		}
		@include breakpoint-991{
			font-size: 46px;
			text-shadow: none;
		}
		@include breakpoint-420{
			font-size: 28px;
		}
	}


	.trv-nl-title{
		color: $clr-primary;
		font-size: 20px;
		font-weight: 500;
		font-family: $font-style2;
		@include breakpoint-767{
			margin-bottom: 20px;
		}
		@include breakpoint-420{
			font-size: 16px;
		}
	}
	.trv-nl-section{
		padding:6px;
		background-color: $bgcolor2;
		border-radius: 50px;
		max-width: 428px;
		flex: 1;
 		height: 80px;
		@include breakpoint-767{
			max-width: 100%;
		}
		@include breakpoint-400{
			padding: 0px;
			border: none;
			background-color: transparent;
		}
	}

	&.formid{
		position: relative;
		z-index: 1;
		&:after{
			content: '';
			height: 80px;
			left: 0px;
			right: 0px;
			background-color: $bgcolor2;
			position: absolute;
			z-index: -1;
		}
	}

	&.trv-full-bx{
		background-color: $clr-yellow;
		&:after{
			display: none;
		}
		.container{
			padding-left: 0px;
			padding-right: 0px;
			@include breakpoint-1365{
				padding-left: 15px;
				padding-right: 15px;	
			}
		}

	}
}
/** - Newsletter form */
.ftr-nw-form{
	display: flex;
	position: relative;
	@include breakpoint-400{
		display: block;
		text-align: center;
	}
	.form-control{
		height: 68px;
		border: 0px;
		padding: 10px 70px 10px 20px;
		border-radius: 50px;
		&:focus{
			background: none;
		}

		&::placeholder{
			font-size: 16px;
			font-weight: 400;
			color: $clr-primary;
			font-family: $heading-font;
		}
	}
	.ftr-nw-subcribe-btn{
		font-size: 28px;
		color: $clr-white;
		border: none;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		background-color: $clr-primary;
		position: absolute;
		top: 5px;
		right: 5px;
		transition: $transition;
		&:hover{
			color: $clr-primary;
			background-color: $clr-yellow;
		}
	}
}

.widget{margin-bottom: 40px;}

/** - Widget address */
.widget_address{
	list-style: none;
	margin-bottom: 0;
	li{
		margin-bottom: 10px;
		position: relative;
		display: flex;
		align-items: center;
		&:last-child{
			border-bottom: none;
			margin-bottom: 0px;
			padding-bottom: 0px;
		}
		.trv-icon{
			width: 56px;
			height: 56px;
			min-width: 56px;
			margin-right: 14px;
			border-radius: 50%;
			background-color: rgb(255, 255, 255, 0.4);
			display: flex;
			align-items: center;
			justify-content: center;
			i{
				
				font-size: 20px;
				color:$clr-white;
			}
		}
		
		span{
			display: block;
			color: $bgcolor2;
			font-weight: 600;
  			font-size: 18px;
			font-family: $font-style2;
			&.trv-contact{
				font-family: $font-style3;
				color: $clr-yellow;
				font-size: 30px;
				font-weight: normal;
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
}

/** - Widget services */
.widget_services{
	ul{
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
		li{
			display:block;
			width:100%;
			padding:2px 0;
			border: 0;
			overflow:hidden;
			a{
				padding:0 0 6px 0;
				display:block;
				transition: $transition;
				font-size: 16px;
				color: $bgcolor2;
				font-weight: 600;
				font-family: $font-style2;
				&:hover{
					color: $clr-yellow;
				}
			}
		}
	}
}

/** - Scroll top btn css */
button{
	&.scroltop{
		height: 40px;
		width: 40px;
		background:none;
		border: none;
		position: fixed;
		right: 15px;
		bottom: 15px;
		text-transform: uppercase;
		margin: 0;
		padding: 0;
		cursor: pointer;
		display: none;
		text-align: center;
		z-index: 999;
		color: $clr-white;
		span{
			display: block;
			font-size: 24px;
			line-height: 24px;
		}
	}
}

/** - Inner page banner */
.wt-bnr-inr{
	background-size: cover;
	background-position:center center;
	width: 100%;
	background-color: $clr-white;
	background-image: url(../images/background/inr-banner.jpg);
	overflow: hidden;
	position: relative;

}

.wt-bnr-inr-entry{
	display: flex;
	width: 100%;
	height:640px;
	padding-bottom: 40px;
	align-content: space-between;
	align-items: baseline;
	margin:0px auto;
	@include breakpoint_1024{
		height: 540px;
	}
	@include breakpoint_767{
		height: 400px;
	}

	.banner-title-outer{
		position: relative;
		margin-top: 240px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		flex-direction: column;
		z-index: 5;
		@include breakpoint_991{
			display: block;
			text-align: center;
		}
		@include breakpoint_767{
			display: block;
			margin-top: 180px;
		}
		
		.wt-title{
			font-size: 60px;
			font-family: $heading-font;
			font-weight: 700;
			margin-bottom: 0;
			position: relative;
			color: $clr-primary;
			@include breakpoint_991{
				font-size: 52px;
			}
			@include breakpoint_767{
				font-size: 40px;
			}
			@include breakpoint_575{
				font-size: 28px;
			}
		}
	
	}
}

/** - Breadcrumb */
.wt-breadcrumb{
	margin: 0;
	display: inline-block;
	list-style: none;
	li{
		padding-right: 30px;
		color:$clr-dark;
		position: relative;
		display: inline-block;
		font-size: 16px;
		font-weight: 600;
		color: $clr-primary;
		a{
			color: $clr-primary;
			transition: $transition;
			&:hover{color: $clr-yellow;}
		}

	&:after{
		content: "-";
		position: absolute;
		right: 8px;
		top: -6px;
		color: #066168;
		font-size: 26px;
		font-weight: 400;
	}
	&:last-child{
			padding-right: 0;
			&:after{display: none;}
		}
	&:first-child{	
		a{
			i{	font-size: 18px;
				vertical-align: text-top;}
		}
	}
	}

}

.trv-inr-bnr-bloon-1{
	position: absolute;
	right: 45px;
	bottom: 65px;
	animation: slide-top2 50s linear infinite alternate-reverse;
	img{
		width: 84px;
		@include breakpoint-575{
			width: 40px;
		}
	}
}

.trv-inr-bnr-bloon-2{
	position: absolute;
	right: -60px;
	top: 165px;
	animation: slide-top 8s linear infinite alternate-reverse;
	@include breakpoint-575{
		right: -40px;
	}
	img{
		width: 150px;
		@include breakpoint-575{
			width: 80px;
		}
	}
}

.trv-inr-bnr-cloud{
	height: 200px;
	width: 100%;
	position: absolute;
	top: 200px;
	left: 0px;
	z-index: 1;
	img{
		height: 190px;
	}
}

.trv-inr-bnr-plane{
	position: absolute;
	width: 50%;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 1;
	.trv-inr-bnr-plane-bx{
		margin-top: 240px;
		animation: slide-right 50s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}
	img{
		animation: slide-top-fast 1.5s ease-in-out infinite alternate-reverse both;
		@include breakpoint-575{
			right: -10px;
		}
	}
}

/*Slide top fast*/
.slide-top-fast {
  animation: slide-top-fast 1.5s ease-in-out infinite alternate-reverse both;
}

@keyframes slide-top-fast {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}


.slide-right {
	animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-right {
  0% {
    transform: translateX(-100%) scale(0.2);
  }
  100% {
    transform: translateX(50%) scale(1);
  }
}


/** - Form control */
.form-control{
	height: 50px;
	font-size: 13px;
	line-height: 20px;
	padding: 10px 12px;
	border-radius: 0;
	border: none;
	&:focus{
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.6);
		background-color: #F8F8F8;
	}
}

/** - Error Page */
.page-notfound-outer{
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom: 200px;
	.container-fluid{
		padding: 0;
	}
}

.page-notfound{
	padding: 0px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	@include breakpoint-991{
		height: auto;
		display: block;
	}
	.page-notfound-media{
		max-width: 670px;
		padding-left: 20px;
		margin-bottom: 30px;
		@include breakpoint-991{
			padding-left: 0px;
			margin: 0px auto 40px;
			max-width: 400px;
		}
	}

	.error-title{
		font-family: $font-style2;
		font-size: 260px;
		font-weight: 700;
		color: $clr-primary;
		text-shadow: 0px 26px 10px rgba(6, 97, 104, 0.26);
		line-height: 0.75;
		@include breakpoint-1199{
			font-size: 140px;
		}
		@include breakpoint_575{
			font-size: 180px;
    		line-height: 160px;
		}
		@include breakpoint_420{
			font-size: 140px;
    		line-height: 100px;
		}

		img{
			max-width: 172px;
			margin-bottom: 20px;
			animation: error-ballonanimation 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
			@include breakpoint-1199{
				max-width: 90px;
			}
		}
	}
	.error-comment{
		font-family: $font-style2;
		font-size: 36px;
		font-weight: 700;
		color: $clr-primary;
		line-height: 1.2;
		margin-bottom: 20px;
		@include breakpoint-1024{
			font-size: 24px;
		}
	}
	.page-notfound-content{
		margin-bottom: 30px;
		p{
			margin-bottom: 30px;
			font-size: 18px;
		}
	}

	.trv-404-sub-title{
		font-family: $heading-font;
		font-size: 40px;
		font-weight: 700;
		color: $clr-primary;
		text-align: left;
		display: block;
		line-height: 1;
		@include breakpoint-1024{
			font-size: 24px;
		}
	}

	.page-notfound-info{
		padding:10px 30px 30px 30px;
		position: relative;
		max-width: 530px;
		@include breakpoint-991{
			margin: -70px auto 0px;
		}
		@include breakpoint-991{
			margin: -40px auto 0px;
		}
	}

}

/** - Blog side bar */
.side-bar{
	padding-left: 10px;
	@include breakpoint-1199{
		padding-left: 0px;
	}
	.widget{
		margin-bottom: 30px;

		&:last-child{
			margin-bottom: 0;
		}
		.widget-title{
			position: relative;
			padding-left: 16px;
			display: table;
			font-size: 24px;
			font-weight: 600;
			font-family: $heading-font;
			padding: 5px 20px;
			background: linear-gradient(90deg, rgba(255, 170, 13, 0.1) 0%, rgba(6, 97, 104, 0.2) 100%);
			border-left: 4px solid $clr-yellow;
			margin-bottom: 0px;
		}

	}

	//search box
	.search-bx{
		position: relative;
		.form-control{
			background-color: $clr-white;
			color: $clr-primary;
			border: 1px solid rgba(6, 97, 104, 0.2);
			border-radius: 30px !important;
			height: 56px;
			font-size: 16px;
			padding: 20px 50px 20px 30px;
			&::placeholder{
				color: #b9b9b9;
			}
			&:focus{
				box-shadow: none !important;
			}
		}
		.input-group-btn{
			position: absolute;
			right: 0px;
			z-index: 10;
			.btn{
				background-color: transparent;
				color: $clr-primary;
				border-radius: 0;
				height: 56px;
				padding: 0 20px;
				transition: $transition;
				&:hover{
					color: $clr-yellow;
				}
			}
		}
		input:focus{
			box-shadow: none;
			outline: none;
		}
	}


	//widget services
	.widget_services{
		ul{
			list-style: none;
			padding-left: 0;
			margin-bottom: 0;
			background-color:$clr-white;
			border: 1px solid rgba(6, 97, 104, 0.2);
			border-radius: 30px;
			padding: 40px;
			@include breakpoint-1199{
				padding: 20px;
				border-radius: 16px;
			}

			li{
				position: relative;
				padding: 5px 0 5px 0px;
				display: flex;
				justify-content: space-between;
				flex-wrap: nowrap;
				&:last-child{
					padding-bottom: 0;
				}
				&:first-child{
					padding-top: 0;
				}
				a{
					color: $clr-primary;
					font-weight: 500;
					font-family: $heading-font;
					font-size: 20px;
					margin-left: 0;
					padding: 0;
					display: inline-block;
					&:hover{
						color: $clr-yellow;
					}
					i{padding-right:5px;}
				}
				.badge{
					background: none;
					color:#8b8b8b;
					font-size: 14px;
					font-weight: 600;
					padding: 0px 0px 0px 20px;
				}			
			}
		}
	}

	//widget services
	.widget_archives{
		ul{
			list-style: none;
			padding-left: 0;
			margin-bottom: 0;
			li{
				position: relative;
				padding: 10px 0 10px 15px;
				line-height: 20px;
				font-size: 14px;
				display: flex;
				justify-content: space-between;
				flex-wrap: nowrap;
				&:after{
					content: '';
					width: 4px;
					height: 5px;
					border-radius: 50%;
					background-color: $clr-primary;
					position: absolute;
					left: 0;
					top: 17px;
				}
				&:last-child{
					padding-bottom: 0;
				}
				a{
					color: $clr-dark;
					margin-left: 0;
					padding: 0;
					display: inline-block;
					font-family: $font-style2;
					font-size: 14px;
					font-weight: 600;
					&:hover{
						color: $clr-primary;
					}
					i{padding-right:5px;}
					&:before{
						display: none;
					}
				}
				.badge{
					background: none;
					color:$clr-primary;
					font-size: 14px;
					font-weight: 600;
				}			
			}
		}
	}	

	//recent post
	.trv-recent-posts{
		.trv-recent-posts-bx{
			background-color:$clr-white;
			border: 1px solid rgba(6, 97, 104, 0.2);
			border-radius: 30px;
			padding: 40px;
			@include breakpoint-1199{
				padding: 20px;
				border-radius: 16px;
			}
		}
		
		.trv-rc-po-st1{
			position: relative;
			display: flex;
			padding: 20px 0px;
			border-bottom: 1px dashed rgba(6, 97, 104, 0.5);
			.post-date{
				font-family: $heading-font;
				width: 40px;
				height: 40px;
				min-width: 40px;
				color: $clr-white;
				font-size: 14px;
				line-height: 1;
				background-color: $clr-primary;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 6px;
				span{
					display: block;
					font-size: 20px;
					line-height: 1;
					font-weight: 700;
					color: $clr-white;
					font-family: $font-style2;
				}
			}

			.trv-post-info{
				margin-left: 30px;
				.post-category{
					font-size: 18px;
					font-weight: 500;
					color:$clr-yellow;
					white-space: nowrap;
					display: table;
					font-family: $heading-font;
					line-height: 1;
					padding-bottom: 15px;
				}
				.trv-post-title{
					.post-title{
						margin-bottom: 0px;
						a{
							transition: $transition;
							font-size: 20px;
							font-family: $heading-font;
							font-weight: 500;
							color: $clr-primary;
							display: block;
							&:hover{
								color: $clr-yellow;
							}
						}
					}
				}
			}

			&:first-child{
				padding-top: 0px;
			}
			&:last-child{
				padding-bottom: 0px;
				border-bottom: 0px;
			}
		}
				

	}

	//widget tags-list
	.widget_tag_cloud{
		.tagcloud{
			display: flex;
			flex-wrap: wrap;
			background-color:$clr-white;
			border: 1px solid rgba(6, 97, 104, 0.2);
			border-radius: 30px;
			padding: 40px;
			grid-gap: 5px 5px;
			@include breakpoint-1199{
				padding: 20px;
				border-radius: 16px;
			}
			a{
				display: block;
				color: $clr-primary;
				background-color: $bgcolor2;
				font-size: 16px;
				font-family: $heading-font;
				font-weight: 500;
				transition: $transition;
				padding: 7px 20px;
				border-radius: 30px;
				&:hover{
					background-color:$clr-yellow;
					color:$clr-dark;
				}
			}
		}
	}

}

.side-bar-filter{
	margin-right: 10px;
	padding:30px;
	box-sizing: border-box;
	background-color: $clr-white;
	border: 1px solid rgba(6, 97, 104, 0.2);
	border-radius: 30px;
	@include breakpoint-1199{
		padding: 20px;
	}
	@include breakpoint-991{
		margin-right: 0px;
	}
}

/** - Comment list */
.twm-post-com-wrap{
	background-color: transparent;
}
.comments-area{
	padding: 0;
	.comments-title{
		position: relative;
		padding-left: 16px;
		display: table;
		font-size: 24px;
		font-weight: 600;
		font-family: $heading-font;
		padding: 5px 20px;
		background: linear-gradient(90deg, rgba(255, 170, 13, 0.1) 0%, rgba(6, 97, 104, 0.2) 100%);
		border-left: 4px solid $clr-yellow;
		margin-bottom: 20px;
	}
}
ol.comment-list{
	list-style: none;
	li.comment{
		position: relative;
		padding: 0;
		.comment-body{
			padding:30px 30px 30px 130px;
			position: relative;
			margin-bottom: 30px;
			overflow: hidden;
			background-color: $clr-light-yellow;
			border-radius: 20px;
			@include breakpoint_575{
				padding:20px;
				text-align: center;
				margin-bottom: 20px;
			}
		}
		.comment-author{
			position: absolute;
			top: 30px;
			left: 30px;
			width: 70px;
			height: 70px;
			border-radius: 50%;
			background-color: $clr-white;
			transition: all .5s ease-in-out;
			@include breakpoint-575{
				position: inherit;
				top: auto;
				left: auto;
				margin: 0px auto 10px;
			}
			.avatar{
				width: 100%;
				border-radius: 50%;
			}
			
		}
		.comment-meta{
			margin-bottom: 5px;
			display:block;
			.fn{
				display: inline-block;
				color: $clr-primary;
				font-family: $heading-font;
				font-size: 20px;
				font-weight: 600;
				font-style: normal;
				@include breakpoint_575{
					display: block;
				}
			}
			span{
				font-weight: 400;
				font-size: 14px;
				color: $common-font-color;
				padding-left: 15px;
			}
		}
		.reply{
			position: absolute;
			right: 20px;
  			top: 20px;
			@include breakpoint_575{
				top: auto;
				right: auto;
				bottom: auto;
				left: auto;
				position: inherit;
			}
			.comment-reply-link{
				position: relative;
				padding: 5px 20px;
				font-size: 14px;
			}
		}
		p{
			margin-bottom: 0px;
			@include breakpoint_575{
				margin-bottom: 20px;
			}
		}
	}
	li{
		.children{
			list-style: none;
			margin-left: 40px;
			@include breakpoint_575{
				margin-left: 0px;
			}
			li{
				padding: 0;
			}
		}
	}
}

/** - Comment form */
.comment-respond{
	padding: 30px;
	border: 1px solid #eeeae6;
    background-color: $clr-white;
	@include breakpoint_480{
		padding: 20px;
	}
	.comment-reply-title{
		font-size: 22px;
		margin-bottom: 20px;
	}
	.form-submit{
		button.site-button{
			position: relative;
			&:focus{
				outline: none !important;
			}
		}
	}
}

.comments-area{
	.comment-form{
		margin: 0px;
		
		@include breakpoint_480{
			margin: 0 -5px;
		}
		.comment-notes{
			display: none;
		}
		p{
			margin-bottom: 20px;
			position: relative;
			font-weight: 600;
			@include breakpoint_767{
				width: 100%;
			}
			label{
				display: none;
				line-height: 18px;
				margin-bottom: 10px;
			}
			input[type="text"]{
				width: 100%;
				height: 52px;
				padding: 10px 20px;
				background-color: transparent;
				border-bottom: 1px solid #cecece;
				@include breakpoint-420{
					padding: 10px 0px;
				}
				&.form-control:focus{
						box-shadow: none;
				}
				
			}
			textarea{
				width: 100%;
				resize: none;
				padding-top: 15px;
				height: 100px;
				margin-bottom: 40px;
				resize: none;
				background-color: transparent;
				border-bottom: 1px solid #cecece;
				@include breakpoint-420{
					padding: 10px 0px;
				}
				&.form-control:focus{
					box-shadow: none;
				}
			}
		}
		p.comment-form-url{
			width: 100%;
			display: block;
			clear: both;
		}
		p.form-allowed-tags{
			width: 100%;
		}
		p.comment-form-comment{
			width: 100%;
			display: block;
			clear: both;
		}
		p.form-submit{
			clear: both;
			width: 100%;
			margin: 0;
		}
	}
}

ol.comment-list{
	li.comment{
		.comment-respond{
			.comment-form{
				p{
					padding: 0 15px !important;
				}
			}
		}
	}
}

.comment-form{
	.form-control{
		&:input-placeholder{
			color: #777;
			font-size: 14px;
		}
	}
}

/** - Single blog post */
.s-post-tag-share{
	display: flex;
	justify-content: space-between;
	padding: 30px 0px 20px 0px;
	align-items: baseline;
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: rgba(6, 97, 104, 0.2);
	@include breakpoint-767{
		display: block;
	}
	.s-post-tags{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	.twm-title{
		font-size: 20px;
		margin-bottom: 10px;
		margin-right: 20px;
	}
	.tagcloud{
		margin-top: -3px;
		display: flex;
		flex-wrap: wrap;
		grid-gap: 5px 5px;
		a {
			display: block;
			color: $clr-primary;
			background-color: $bgcolor2;
			font-size: 16px;
			font-family: $heading-font;
			font-weight: 500;
			transition: $transition;
			padding: 7px 20px;
			border-radius: 30px;
			&:hover{
				background-color:$clr-yellow;
				color:$clr-dark;
			}
		}
	}
	.s-post-share{
		text-align: right;
		@include breakpoint-767{
			text-align: left;
			margin-top: 30px;
		}
		.social-icons{
			margin-top: 0px;
			li{
				margin-bottom: 10px;
			}
		} 
	}
}

/** - Single post navigation */
.post-navigation{
	padding: 20px 0px;
	margin-bottom: 60px;
	background-color: $clr-white;

	border-width: 1px 0px;
	border-style: solid;
	border-color: rgba(6, 97, 104, 0.2);

	.post-nav-links{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		margin: 0 -15px;
		.post-nav-item{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			width: 50%;
			padding: 0 15px;
			a{transition: all .35s ease;}
			@include breakpoint_640{
				display: block;
			}
			.nav-post-img{
				width: 90px;
				min-width: 90px;
				margin-right: 20px;
				@include breakpoint_640{
					width: 100%;
				}
				a{
					img{
						border: 2px solid $clr-white;
						box-shadow: 0 0 10px rgba(0,0,0,0.3);
					}
					@include breakpoint_640{
						width: 40px;
						min-width: 40px;
						display: inline-block;
					}
				}
				
			}
			.nav-post-meta{
				b{
					color: $clr-primary;
					font-size: 14px;
					font-family: $heading-font;
					font-weight: 600;
					display: block;
					margin-bottom: 3px;
					transition: $transition;
					&:hover{
						color: $clr-yellow;
					}
				}
				a{
					font-size: 14px;
					color: $common-font-color;
					p{
						max-width: 300px;
					}
					&:hover{
						color: $clr-yellow;
					}
				}
			}
			&.nav-post-next{
				flex-direction: row-reverse;
				text-align: right;
				.nav-post-img {
					margin-right: 0;
					margin-left: 20px;
					@include breakpoint_640{
						margin-left: 0;
					}
				}
			}
			&:hover{
				a{
					color: $clr-primary;
				}
		   }
		}
		
	}
}

/** - Loading */
.loading-area{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	overflow: hidden;
	.loading-box{
		width: 100%;
		height: 100%;
		background-color: $clr-white;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 1;
		z-index: 9999;
	}
	.loading-pic{
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 99999;
		text-align: center;
		transform: translate(-50% , -50%);
	}
}

/** - Loading animation start */
.loader {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 6.250em;
	height: 6.250em;
	animation: rotate5123 2.4s linear infinite;
	.white {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		animation: flash 2.4s linear infinite;
		opacity: 0;
	}
	.dot {
		position: absolute;
		margin: auto;
		width: 2.4em;
		height: 2.4em;
		border-radius: 100%;
		transition: all 1s ease;
	}
	.dot:nth-child(2) {
		top: 0;
		bottom: 0;
		left: 0;
		background: #FF4444;
		animation: dotsY 2.4s linear infinite;
	}
	.dot:nth-child(3) {
		left: 0;
		right: 0;
		top: 0;
		background: #FFBB33;
		animation: dotsX 2.4s linear infinite;
	}
	.dot:nth-child(4) {
		top: 0;
		bottom: 0;
		right: 0;
		background: #99CC00;
		animation: dotsY 2.4s linear infinite;
	}
	.dot:nth-child(5) {
		left: 0;
		right: 0;
		bottom: 0;
		background: #33B5E5;
		animation: dotsX 2.4s linear infinite;
	}
}

@keyframes rotate5123 {
  0% {
    transform: rotate( 0 );
  }

  10% {
    width: 6.250em;
    height: 6.250em;
  }

  66% {
    width: 2.4em;
    height: 2.4em;
  }

  100% {
    transform: rotate(360deg);
    width: 6.250em;
    height: 6.250em;
  }
}

@keyframes dotsY {
  66% {
    opacity: .1;
    width: 2.4em;
  }

  77% {
    opacity: 1;
    width: 0;
  }
}

@keyframes dotsX {
  66% {
    opacity: .1;
    height: 2.4em;
  }

  77% {
    opacity: 1;
    height: 0;
  }
}

@keyframes flash {
  33% {
    opacity: 0;
    border-radius: 0%;
  }

  55% {
    opacity: .6;
    border-radius: 100%;
  }

  66% {
    opacity: 0;
  }
}

/** - Section overlay */
.overlay-wraper{
	position: relative;
	.overlay-main {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		&.innr-bnr-olay{
			opacity: 1;
			@include breakpoint-1024{
				border-bottom: 1px solid #e9e3da;
			}
			@include breakpoint-575{
				border-top: 1px solid #e9e3da;
			}
		}
	}
}

.opacity-01{opacity: 0.1;}
.opacity-02{opacity: 0.2;}
.opacity-03{opacity: 0.3;}
.opacity-04{opacity: 0.4;}
.opacity-05{opacity: 0.5;}
.opacity-06{opacity: 0.6;}
.opacity-07{opacity: 0.7;}
.opacity-08{opacity: 0.8;}
.opacity-09{opacity: 0.9;}

.overlay-wraper{
	>.container{
		position: relative;
		z-index: 1;
	}
	>.container-fluid{
		position: relative;
		z-index: 1;
	}
}

/** - Video */

.yt-thum-box img {
	margin: -9.5% 0%;
}
.blog-youtube-vide{
	iframe{
		width: 100%;
		height: 430px;
		display: block;
		@include breakpoint-767{
			height: 290px;
		}
		@include breakpoint-575{
			height:309px;
		}
		@include breakpoint-420{
			height:307px;
		}
		@include breakpoint-360{
			height:260px;
		}
	}
}

/** - Search bar */
#search{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 0%;
	height: 0%;
	background-color:$bgcolor1;
	transition: all 0.5s ease-in-out;
	transform: translate(-50%, -50%);
	opacity: 0;
	visibility: hidden;
	form{
		position: absolute;
		opacity: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50% , -50%);
		width:calc(100% - 80px);
		max-width: 600px;
		color: $clr-primary;
		font-size: 30px;
		font-weight: 300;
		text-align: left;
		outline: none;
		padding: 6px;
		transition: $transition;
		background-color:$bgcolor2;
		border-radius: 100px;
		.input-group{
			background-color: $clr-white;
			border-radius: 100px;
  			overflow: hidden;	
		}
	}
	input[type="search"]{
		background: none;
		border: none;
		padding: 0 12px 0px 30px;
		outline:none;
		color: $clr-primary;
		font-size: 18px;
		height: 70px;
		background-color: $clr-white;
		@include breakpoint_575{
			font-size: 14px;
		}
		&:focus{
			box-shadow: none;
		}
		&::placeholder{
			color: $clr-primary;
		}
	}
	.input-group-append{
		display: flex;
	}
	.search-btn{
		padding: 0 10px;
		outline: none;
		width: 70px;
		height: 70px;
		background:$clr-primary;
		border-radius: 50%;
		flex: 1;
		margin-left: 10px;
		border: none;
		transition: $transition;
		i{
			font-size: 24px;
			color: $clr-white;
			&:hover{
				color: $clr-white;	
			}
		}
		&:hover{
			background-color: $clr-yellow;
		}
	}

	&.open{
		transform: translate(-50%, -50%);
		opacity: 1;
		z-index: 999;
		display: block;
		width: 100%;
		height: 100%;
		visibility: visible;
		form{
			opacity: 1;
		}
	}
	.close-btn{
		position: fixed;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		top: 30px;
		right: 30px;
		opacity: 1;
		font-size:16px;
		color: $clr-primary;
		width: 40px;
		height:40px;
		border-radius: 4px;
		background-color: $clr-yellow;
		transition: $transition;
		&:hover{
			background-color: $clr-primary;
			color: $clr-white;
		}
	}

}
/** - Cart dropdown */

.search{
	position: relative;
}

/** - Project btn filter */
.project-filter-wrap.pro-filtr-cate-carousal{
	list-style: none;
	margin: 0px 0 30px;
	span{
		position: relative;
		display: inline-block;
		font-size: 15px;
		font-weight: 700;
		color: $clr-dark;
		padding: 5px 10px;
		cursor: pointer;
		border-radius: 3px;
		transition: $transition;
		&.active{
			background-color: $clr-primary;
			box-shadow: 0 8px 10px rgba(12,12,12,.1);
			color: $clr-white;
		}
		&:hover{
			background-color: $clr-primary;
			box-shadow: 0 8px 10px rgba(12,12,12,.1);
			color: $clr-white !important;
		}
		
	}
}

/** - Swiper Controls */
.swiper-button-next,
.swiper-button-prev{
	width: 56px ; 
	height: 56px;
	margin:0px 10px 14px;
	color: $clr-white; 
	background-color: $clr-yellow; 
	transition: $transition;
	border-radius: 50%;
}

.swiper-button-prev{left: 0px;}
.swiper-button-next{right: 0px;}
.swiper-button-next:after,
.swiper-button-prev:after{
	font-size: 16px !important;
	padding: 10px 12px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
	background-color: $clr-white;
	color: $clr-yellow;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

.swiper-pagination{margin-top: 30px; position: relative;}
.swiper-pagination-bullet{
    width: 14px;
    height: 14px;
    margin: 5px 4px;
	opacity: 1;
    border-radius: 50%;
    transition: opacity 200ms ease;

	background-color: $clr-white;
	border: 2px solid $clr-primary;

	&.swiper-pagination-bullet-active{
		background-color: $clr-yellow;
		border: 2px solid $clr-yellow;
	}
}


/** - Swiper nav bottom center position */
.swiper-nav-center-bottom{
	padding-bottom: 116px;
	@include breakpoint-1024{
		padding-bottom: 90px;
	}
	.swiper-button-next, .swiper-button-prev {
		bottom: 0;
		top: auto;
	}
	.swiper-button-prev {
		left: calc(50% - 70px);
	}
	.swiper-button-next {
		right: calc(50% - 70px);
	}
}

/** - Blog gallery */
.blog-gallery-style1{
	padding-left:0;
	@include breakpoint_991{
		padding-left: 0;
	}
	.owl-carousel{ 
		.owl-stage-outer {
			display: table;
			position: relative;
			padding: 30px 0 30px 10px;
			@include breakpoint_1270{
				display: inline-block;
				padding: 0;
			}
		}
	}
	@include breakpoint_1270{
		.blog-post-4-outer{
			box-shadow: none;
		}
	}
}

/** - Product box */
.wt-product-box{
	position: relative;
	.wt-info{
		padding: 20px 10px 0px 10px;
		.wt-title{
			font-size: 22px;
			a{
				transition: $transition;
				&:hover{
					color: $clr-primary;
				}
			}
			
		}
	}
	.price{
		padding-top: 10px;
		display: block;
		del{
			font-size: 16px;
			color: $clr-dark;
			margin: 4px 4px;
			font-weight: 700;
		}
		ins{
			font-size: 22px;
			color: $clr-primary;
			text-decoration: none;
			font-weight: 700;
		}
	}
	.wt-thum-bx{
		img{
			display: block;
			margin: 0 auto;
		}
	}
	.item-cart-view{
		position: absolute;
		right:5px;
		bottom: 5px;
		.item-btn{
			position: relative;
			display: inline-block;
			margin-right: 5px;
			&:last-child{margin-right: 0px;}
			a{display: block;
				i{
					width: 36px;
					height: 36px;
					font-size: 18px;
					line-height: 36px;
					display: block;
					text-align: center;
					background-color: #f9f3ea;
					position: relative;
					color: $clr-dark;
					transition: $transition;
					&:hover{
						background-color: $clr-white;
						color: $clr-primary;
					}
				}
			}
		}
	}

	.rating-bx{
		padding-top: 10px;
		color: $clr-primary;
	}
	&:hover{
		.item-cart-view{
			opacity: 1;
			z-index: 3;
		}
	}
}

/** - Product detail page slider */
.trv-night-count-slider{
	display: flex;
	white-space: nowrap;
	align-items: baseline;
	b{font-weight: 500; font-family: $heading-font;}
	.slider{
		&.slider-horizontal{
			width: 100%;
			margin-left: 10px;
			margin-right: 10px;
			.slider-track{
				height: 8px;
				background-color: $clr-yellow;
				background-image: none;
				margin-top: 0;
				margin-left: 0;
			}
			.slider-handle{
				background-color: $clr-yellow;
				background-image: none;
				width: 15px;
				height: 15px;
				top: 7px;
				margin-left: -5px;
			}
		}
	}
	.slider .tooltip.bs-tooltip-top {
	margin-top: -30px;
	}
	.slider-selection{background: $clr-primary;}
	.trv-night-count{min-width: 22px; display: inline-block; text-align: center;}
}

/** - Price range tool tip */
.tooltip {
	position: absolute;
	z-index: 1070;
	display: block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: left;
	text-align: start;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	word-break: normal;
	word-spacing: normal;
	word-wrap: normal;
	white-space: normal;
	filter: alpha(opacity=0);
	opacity: 0;
	line-break: auto;
	&.bs-tooltip-top {	
		padding: 5px 0;	margin-top: -3px;
		.arrow {
			bottom: 0px;
			position: absolute;
			width: 0;
			height: 0;
			border-left:10px solid transparent;
			border-right:10px solid transparent;
			border-top:10px solid $clr-black;
			left: -10px !important;
		}
	}
	
	.tooltip-inner {
		max-width: 200px;
		padding: 3px 8px;
		color: $clr-white;
		text-align: center;
		background-color: $clr-black;
		border-radius: 4px
	}
}

/** - Select box border style1 */
.select-box-border-style1{
	border: none;
	&:focus{
		outline: none !important;
	}
	.btn{
		padding: 8px 20px;
		background-color: $clr-white;
	}

}

/** - Touchspin input type number */
.bootstrap-touchspin{
	.input-group-btn-vertical{
		position: relative;
		white-space: nowrap;
		width: 1%;
		vertical-align: middle;
		display: table-cell;
		>.btn{
			float: none;
			margin-left: -1px;
			position: relative;
			border-width: 1px;
			border-style: solid;
			border-color: $clr-white;
			background: $clr-primary;
			width: 20px;
			height: 23px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			&:before{display: none;}
		}
		.bootstrap-touchspin-up{
			border-radius: 0;
			border-top-right-radius: 0;
		}
		.bootstrap-touchspin-down{
			margin-top: 0px;
			border-radius: 0;
			border-bottom-right-radius: 0;
		}
		i{
			position: absolute;
			top: 7px;
			left: 7px;
			font-size: 16px;
			font-weight: normal;
			color: $clr-white;
		}
	}
}

.btn-quantity{
	max-width:130px;
	width:100%;
	margin-right:30px;
	display:inline-block;
	@include breakpoint-420{
		max-width: 34px;
	}
	.form-control{
		height:46px;
		background-color: $clr-white;
		border: 1px solid #ddd;
	}
}

.video-section{
	position:relative;
	z-index:1;
	img{
		width: 100%;
	}
	a{
		display: block;
		width: 138px;
		height: 138px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50% , -50%);
		border-radius: 50%;
		border: 1px solid #fff;
	}
}

/** - Spin animation */
.rotate-center {
	animation: rotate-center 40s linear infinite;
}

@keyframes rotate-center {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

.section-full{
	&.p-t120,
	&.p-b90,
	&.p-tb120{
		@include breakpoint_1024{
			padding-top: 50px;
			padding-bottom: 20px;
		}
	}
	&.p-b120{
		@include breakpoint_1024{
			padding-bottom: 50px;
		}
	}
}
/** - Pagination */
.custom-pagination{
    position: relative;
    display: block;
    margin-top: 30px;
	margin-bottom: 30px;
    text-align: center;
	@include breakpoint_991{
		margin-top: 0px;
    	margin-bottom: 0px;
	}
	li {
		position: relative;
		display: inline-block;
		margin: 0px 1px;
		a {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 46px;
			height: 46px;
			color: $clr-primary;
			font-size: 18px;
			line-height: 46px;
			font-weight: 700;
			text-align: center;
			transition: $transition;
			font-family: $heading-font;
			z-index: 1;
			border-radius: 10px;
			border: 1px solid transparent;
			@include breakpoint-575{
				width: 40px;
				height: 40px;
			}
			&:hover,
			&.active{
				background-color: $clr-white;	
				color: $clr-primary;
				border: 1px solid rgba(6, 97, 104, 0.27);
			}
			span{
				position: relative;
			}
		}
		&.prev{
			a{
				border: 1px solid rgba(6, 97, 104, 0.27);
				color: $clr-primary;
				background-color: $clr-white;
				&:hover{
					background-color: $clr-primary;	
					color: $clr-white;
				}
			}
			
		}
		&.next{
			a{
				border: 1px solid rgba(6, 97, 104, 0.27);
				color: $clr-primary;
				background-color: $clr-white;
				&:hover{
					background-color: $clr-primary;	
					color: $clr-white;
				}
			}
			
		}
	}
}

.content-table{ 
	table{
		width: 100%;
		background-color: #fafafa;
		td,
		th{
			padding: 5px 20px;
			font-size: 14px;

		}
		td:first-child{
			width: 25%;
			font-weight: 600;
			color: $clr-dark;
		}
		td:first-child,
		th:first-child{
			text-align: left;
			border-left: none;
		}
	}
	
	&.align-left{
		td:first-child{
			text-align: left;
		}
	}

	&.align-left{
		th:first-child{
			text-align: left;
		}
	}
	tr:nth-child(odd){
		background: $clr-white;
	}
}

select {
    appearance: none;
    padding: 10px 30px 10px 10px;
    background-color: $clr-white;
}

/** - Circle text section */
.emblem-wrap{
	i{
		margin: 0 auto;
		width: 90px;
		text-align: center;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50% , -50%);
		height: 90px;
		overflow: hidden;
		border-radius: 50%;
	}
}

.emblem{
	margin: 0 auto;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	color: $clr-dark;
	animation: spinZ 20s linear infinite;
	text-align: center;
	background-color: $clr-white;
	span { 
		padding: 6px; 
		position: absolute; 
		display: inline-block; 
		left: 0; 
		right: 0; 
		top: 0; 
		bottom: 0; 
		text-transform: uppercase; 
		font-size: 14px;
		transition: all 0.5s cubic-bezier(0, 0, 0, 1);
	}
}
@keyframes spinZ {
  0% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@media only screen and (max-width:767px){
  .emblem-wrap{left: 20px;}
}

/** - Circle text */
.circle-text2{
	position: relative;
	margin-bottom: 50px;
	@include breakpoint-990{margin: 30px 0px;}
}


/** - Marquee slider */

.vert-move {
    -webkit-animation: mover 3s infinite  alternate;
    animation: mover 3s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-40px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-40px); }
}

@keyframes spin {
	to {
	  transform: rotate(360deg);
	}
}

@keyframes spin2 {
	0% {
	  stroke-dasharray: 1, 800;
	  stroke-dashoffset: 0;
	}
	50% {
	  stroke-dasharray: 400, 400;
	  stroke-dashoffset: -200px;
	}
	100% {
	  stroke-dasharray: 800, 1;
	  stroke-dashoffset: -800px;
	}
}

.spin2 {
	transform-origin: center;
	animation: spin2 10s ease-in-out infinite,
	  spin 5s linear infinite;
	animation-direction: alternate;
}

.parallax-section {
	background: $clr-black;
	overflow: hidden;
	position: relative;
	.parallax-content {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		height: 100%;
		position: relative;
		z-index: 2;
	}
}

.parallax-image {
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	height: 900px;
	left: 0;
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	position: absolute;
	top: 0;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-o-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	width: 100%;
	z-index: 1;
}

/** - Start  curser pointer Css */
.cursor { 
	position: fixed; 
	width: 40px; 
	height: 40px;
	margin-left: -20px; 
	margin-top: -20px; 
	border-radius: 50%; 
	border: 2px solid $clr-dark; 
	transition: 0.3s;
	transform: translate(-50%, -50%);  
	pointer-events: none; 
	z-index: 1000;
}
  
.cursor2 {
	position: fixed; 
	width: 4px; 
	height: 4px; 
	margin-left: -20px; 
	margin-top: -20px; 
	border-radius: 50%; 
	background-color: $clr-primary; 
	transform: translate(-50%, -50%);
	transition: 0.1s; 
	pointer-events: none; 
	z-index: 1000;
}
.grow,
.grow-small {transform: scale(3); background: white; mix-blend-mode: difference; border: none;}
.grow-small {transform: scale(1.7);}


/** - Accordians */
.wt-accordion{
	border: 6px solid rgba(41, 137, 145, 0.2);
	border-radius: 30px;
	background-color: $clr-white;
	padding: 30px;
	.wt-panel{
		position: relative;
		border: none;
		margin-bottom: 0px;
		border-radius: 0;
		transition: $transition;
		
		.acod-content{
			padding:20px 20px 20px 40px;
			font-size: 16px;
			background-color: $clr-white;
			border-bottom: 1px solid rgba(6, 97, 104, 0.2);
			@include breakpoint-768{
				padding:20px 0px;
			}
		}
		.acod-head{
			a{
				background-color: $clr-white;
				font-size:24px;
				color: $clr-primary;
				font-family: $heading-font;
				border-bottom: 1px solid rgba(6, 97, 104, 0.2);
				@include breakpoint-768{
					font-size: 20px
				}
			}
		}
		&:last-child{
			margin-bottom: 0;
			.acod-content{
				border-bottom: 0px
			}
			.acod-head{
				a{
					border-bottom: 0px;
				}
			}
		}
	}
}

.acod-title{
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18px;
	font-family: $heading-font;
	a{
		position: relative;
		z-index: 1;
		overflow: hidden;
	}
}

.acod-head{
	position: relative;
	a{
		display: block;
		padding:20px 30px 20px 0px;
		background-color: #f6f6f6;
		&.collapsed {
			color: $clr-dark;
		}
	}
	.fa{
		margin-right: 5px;
	}

	a {
		color: $clr-dark;
		&:hover {
			color: $clr-dark;
		}
		&:active {
			color: $clr-dark;
		}
		&:focus {
			color: $clr-dark;
		}
	}

	.indicator{
		padding: 20px 0px 15px 0px;
		color: $clr-primary;
		position: absolute;
		right: 0;
		top: 6px;
		height: 100%;
		font-size: 22px;
		line-height: 0px;
		background-color: $clr-white;
		display: flex;
		transform: $transition;
		i{
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			transform: $transition;
		}
	}

	/*Accodian open close indicator css*/

	
	&{
	
		[aria-expanded="true"]{
			.indicator{
				i{color: $clr-yellow;
					&:before{
						font-family: "bootstrap-icons";
						content: "\F282";
					}
				}
			}
		}
	}

}

/** - Sidbar popup Css */
.nav-btn.navSidebar-button { 
	display: inline-block;
	a{
		 i {font-size: 24px; display: inline-block; color:$clr-primary; transition: .5s;}
	}
}

.xs-sidebar-group{
	 .xs-overlay {
		left: 100%; 
		top: 0; 
		position: fixed; 
		z-index: 101; 
		height: 100%; 
		opacity: 0; 
		width: 100%; 
		visibility: hidden; 
		transition: all 0.4s ease-in 0.8s;
	}
	.widget-heading {position: absolute; top: 23px; right: 0; padding: 25px;}
}

.xs-sidebar-widget { 
	position: fixed; 
	right: -100%; 
	top: 0; 
	bottom: 0; 
	width: 100%; 
	max-width: 500px; 
	z-index: 999999; 
	overflow: hidden; 
	overflow-y: auto;  
	-webkit-overflow-scrolling: touch; 
	transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; 
	visibility: hidden; 
	opacity: 0;
	border-radius:0px;
	background: rgba(0, 0, 0, 0.22);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.xs-sidebar-group.isActive{
	.xs-overlay {
		opacity: 0.7; 
		visibility: visible; 
		transition: all 0.8s ease-out 0s;  
		left: 0;
	}
	.xs-sidebar-widget { 
		opacity: 1; 
		visibility: visible; 
		right: 0;  
  		transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
	}
	.sidebar-widget-container { 
		top: 0px; 
		opacity: 1; 
		visibility: visible; 
		transition: all 1s ease-out 1.2s; 
		-webkit-backface-visibility: hidden; 
		backface-visibility: hidden;
	}
} 
.sidebar-textwidget { padding: 120px 32px 40px 32px;}
.close-side-widget{
 	i{ color:$clr-yellow; font-size: 28px; display: block;}
}

.sidebar-widget-container {
	position: relative; 
	top: 150px; 
	opacity: 0;  
	visibility: hidden; 
	transition: all 0.3s ease-in 0.3s; 
	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden;
}

.xs-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%;  opacity: 0.5;  z-index: 0;}
.xs-bg-black{background-color:$clr-black;}
.sidebar-info-contents{
	.content-box{
		.title{font-size: 24px; color: $clr-white; margin-bottom: 15px;}
	}
	.nav-logo{margin-bottom: 40px; margin-top: 30px;}
	.text{color: #9b9fb5;}
} 

/** - Side Panel */
.trv-side-pnl-info{
	.trv-side-pnl-logo{
		margin-bottom: 60px;
		img{max-width: 134px;}
	}
	.trv-side-pnl-content{
		.trv-sm-title{
			color: $clr-white;
			font-size: 28px;
			margin-bottom: 20px;
			@include breakpoint-420{
				font-size: 22px;
				margin-bottom: 10px;
			}
		}
		.trv-lg-title{
			color: $clr-green;
			font-size: 48px;
			margin-bottom: 20px;
			text-transform: uppercase;
			@include breakpoint-420{
				font-size: 32px;
			}
		}
		p{
			font-size: 16px;
			color: rgba(255,255,255,0.5);
			&:last-child{
				margin-bottom: 0px;
			}
		}
		.trv-side-pnl-content-mid{
			margin-bottom: 60px;
		}
	}

	.trv-side-pnl-plan{
		list-style: none;
		display: flex;
		justify-content: space-between;
		padding-bottom: 40px;
		margin-bottom: 40px !important;
		position: relative;
		&:after{
			content: '';
			width: 300px;
			background-color:rgba(255,255,255,0.16);
			height: 1px;
			position: absolute;
			left: 50%;
			bottom: 0px;
			transform: translateX(-50%);
		}
		.trv-side-pnl-plan-count{
			color: $clr-green;
			font-size: 34px;
		}
		span{
			color: $clr-white;
			font-family: $heading-font;
			font-size: 18px;
			font-weight: 500;
		}
	}
}


/** - Balloon animation */
.slide-top {
	-webkit-animation: slide-top 3s linear infinite alternate-reverse ;
	        animation: slide-top 3s linear infinite alternate-reverse ;
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

.slide-top2 {
	-webkit-animation: slide-top2 20s linear infinite alternate-reverse ;
	        animation: slide-top2 20s linear infinite alternate-reverse ;
}

@keyframes slide-top2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
  }
}


.tvr-hot-ballon-wrap{
	position: relative;
	overflow: hidden;
	.left-hot-ballon{
		position: absolute;
		left: -115px;
		top: 40%;
		width: 230px;
		animation: slide-top2 20s linear infinite alternate-reverse;
		opacity: 0.5;
		@include breakpoint-767{
			width: 100px;
			left: -50px;
		}
	}
	.right-hot-ballon{
		position: absolute;
		right: -55px;
		top: 40%;
		width: 110px;
		animation: slide-top 8s linear infinite alternate-reverse;
	}
}

/** - Destination Bx 1 */

.trv-popular-destination-row{
	position: relative;
	z-index: 1;
	margin-top: -30px;
	.swiper-wrapper{
		padding-top: 30px;
		
	}
	
}

.trv-popular-destination{
	background-size: contain;
	background-position: bottom center;
	background-repeat: repeat-x;
}
.trv-destination-bx1{
	position: relative;
	z-index: 1;
	.trv-media{
		border-radius: 30px;
		overflow: hidden;
		img{
			width: 100%;
			height: 500px;
			object-fit: cover;
			object-position: center;
			@include breakpoint-1366{
				height: 450px;
			}
			@include breakpoint-400{
				height: 420px;
			}
		}
	}
	.trv-content{
		.trv-title{
			margin-bottom: 0px;
			@include breakpoint-768{
				font-size: 22px;
			}
			a{
				display: block;
				color: $clr-primary;
				background-color: $clr-white;
				text-align: center;
				padding: 20px;
				border-radius: 30px;
				position: absolute;
				left: 0px;
				right: 0px;
				bottom: -1px;
				transition: $transition;
			}
		}
	}
	.trv-on-hover{
		position: absolute;
		z-index: -1;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
		transition: $transition;
		img{
			width: 100%;
			max-width: 300px;
			margin: 0px auto;
			display:block;
			transition: $transition;
		}
	}
	&:hover{
		.trv-content{
			.trv-title{
				a{
					color: $clr-white;
					background-color: $clr-primary;
				}
			}
		}
		.trv-on-hover{
			top: -30px;
		}
		
	}
}

/** - Social style 1 */

.social-icons{
	margin: 20px 0 0 0;
	li{
		display: inline-flex;
		height: 46px;
		width: 46px;
		background-color: $clr-yellow;
		margin-right: 10px;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		transition: $transition;
		&:last-child{
			margin-right: 0px;
		}
		a{
			height: 36px;
			width: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: $clr-primary;
			line-height: 36px;
			padding: 0;
			color:$clr-white;
			font-size: 18px;
			text-align: center;
			border-radius: 50%;
			transition: $transition;
			i{
				transition: $transition;
				display: inline-block;
				line-height: inherit;
				&::before{
					line-height: inherit;
				}
			}
			&:hover {
				color: $clr-yellow;
				border-radius: 10px;
				box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.36);
				
				i{
					transform: rotateY(360deg) scale(1.2);
				}
			}
		}
		&:hover {
			border-radius: 10px;
		}
	}
}

.footer-follow-instagram{
	display: flex;
	align-items: center;
	padding: 40px 0px;
	@include breakpoint-1199{
		display: block;
		padding: 5px 0px;
	}
	.widget-title{
		white-space: nowrap;
  		margin-right: 50px;
		margin-bottom: 0px;
		@include breakpoint-1199{
			margin-bottom: 30px;
		}
	}
}

.trv-ftr-insta-gall{
	list-style: none;
	margin: 0px;
	display: flex;
  	gap: 20px;
	@include breakpoint-1199{
		flex-wrap: wrap;
		gap: inherit;
		grid-gap: 10px 2%;
	}
	li{
		width: 9.43%;
		@include breakpoint-1199{
			width: 9.33%;
		}
		@include breakpoint-991{
			width: 18.4%;;
		}
		@include breakpoint-540{
			width: 23.4%;
		}
		@include breakpoint-420{
			width: 32%;
		}
		a{
			position: relative;
			border-radius: 20px;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: $transition;
			background-color: $clr-primary;
			img{
				width: 100%;
				transition: $transition;
			}
			span{
				position: absolute;
				top: 50%;
				left: 50%;
				display: table;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				width: 90px;
				height: 90px;
				i{
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50% , -50%);
					color: $clr-white;
					opacity: 0;
					transition: $transition;
				}

				&:before,
				&:after {
					position: absolute;
					display: block;
					width: 0%;
					height: 5px;
					content: '';
					border-top: 1px solid white;
					border-bottom: 1px solid white;
					opacity: 0.8;
					top: 50%;
					-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
					-webkit-transition: all 0.35s ease-in-out;
					transition: all 0.35s ease-in-out;
				}

				&:before {right: -60%;}
				&:after {left: -60%;}
			}

			&:hover{
				img{
					opacity: 0.3;
					filter: blur(3px);
				}

				i {
				-webkit-transform: scale(1.1) translate(-50% , -50%);
				transform: scale(1.1) translate(-50% , -50%);
				opacity: 1;
				}
				span {opacity: 1;}

				span:before,
				span:after {
				width: 80%;
				}

			}
		}
	}
}

/** - Footer dark version css */
.footer-light{
	background-color:$clr-light-yellow;
	color: $common-font-color;
	background-image: url(../images/background/ftr-light-bg.png);
	background-size: cover;
	.logo-footer{
		margin-bottom: 40px;
		text-align: center;
		display: block;
		max-width: 193px;
	}
	.footer-top{
  		padding: 120px 0px 80px 0px;
		@include breakpoint_1200{
			padding: 60px 0px 0px 0px;
		}

	}
	.f-top-space{
		padding-top: 0px;
	}
	.call-us{
		padding: 10px 20px 10px 0;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		font-family: $font-style2;
		@include breakpoint_991{
			margin: 15px 0;
		}
		i{display: block;font-size: 42px;line-height: 42px;margin-right: 10px;}
		a{
			display: block;
			color: $clr-primary;
			font-size: 32px;
			line-height: 32px;
			font-family: $font-style2;
			@include breakpoint_767{
				font-size: 22px;
				line-height: 22px;
			}
		}
	}
	.widget_about{
		p{
			padding-right: 50px;
			font-size: 16px;
		}
	}
	.widget-title{
		font-family: $heading-font;
		color: $clr-primary;
		font-size: 28px;
		margin-bottom: 30px;
		position: relative;
		@include breakpoint_767{
			font-size: 22px;
		}
	}
	
	.footer-bottom{
		padding: 15px 0px;
		color: $clr-primary;
		position: relative;
		z-index: 1;
		font-weight: 400;
		.copyrights-text {
			text-align: center;
			font-size: 14px;
			font-weight: 600;
			span{display: inline-block; text-transform: uppercase;}
		}

	}
	.copyrights-nav{
		list-style: none;
		display: block;
		margin-bottom: 0;
		li{
			display: inline-block;
			margin-right: 8px;
			&:first-child {
				margin-left: 0;
			}
			&:last-child{
				margin-right: 0;
				&:after {
					display: none;
				}
			}
			&:after{
				content: "/";
				position: relative;
				right: -8px;
				color: $clr-white;
			}
			a{
				color: $clr-white;
				font-size: 14px;
				&:hover{
					color: $clr-primary;
				}
				&:active{
					color: $clr-primary;
				}
				&:focus{
					color: $clr-primary;
				}
			}
		}
		li.active{
			a{
				color: $clr-white;
			}
		}
	}
	.widget_address{
		li{
			i{
				font-weight: 400;
			}
		}
	}
	.widget_services{
		ul{
			li{

				a{
					color: $clr-primary;
					&:hover{
						color: $clr-yellow;
					}
				}
			}
		}
	}
	.widget_address{
		li{
			.trv-icon{
				background-color: rgba(6, 97, 104, 0.09);
				i{
					color:$clr-primary;
				}
			}
			span{
				color: $clr-primary;
			}
		}
	}
	@include breakpoint-991{
		.widget{
			margin-bottom: 20px;
		}
	}

	@include breakpoint-540{
		.col-4{
			width: 50%;
		}
	}
}

/** - Animated car section */
.footer-follow-instagram2{
	background-color: $clr-light-yellow;
	text-align: center;
	padding: 80px 0px 140px 0px;
	border-bottom: 4px solid $clr-primary;
	position: relative;
	@include breakpoint-1024{
		padding: 50px 0px 140px 0px;
	}
	.widget-title{
  		margin-bottom: 30px;
	}
	.marquee-car{
		position: absolute;
		left: 0px;
		bottom: 0px;
		z-index: 2;
		width: 100%;
	}
	.trv-right-tree-pic{
		position: absolute;
		right: 0px;
		bottom: 0px;
		z-index: 0;
		width: 220px;
		img{
			width: 100%;
		}
	}
}

.trv-animated-car{
	position: relative;
	width: 248px;
	height: 135px;
	.car-main{
		height: 135px;
		position: absolute;
		left: 0px;
		bottom: 0px;
	}
	.tyre-1 {
		position: absolute;
		left: 12.9%;
		bottom: 0%;
		width: 15%;
	}
	.tyre-2 {
		position: absolute;
		right: 10.8%;
		bottom: 0%;
		width: 15%;
	}
}

/** - Tyre Spin */
.spin-tyres {
	animation-name: spin;
	animation-duration: 2400ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
  
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/** - Newsletter */
.trv-subscribe-nl-st2{
	.container{
		background-color: $clr-primary;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 70px;
		max-width: calc(1320px - 24px);
		@include breakpoint-1199{
			padding: 20px;
		}
		@include breakpoint-991{
			display: block;
		}
		.trv-left-section{
			@include breakpoint-1199{
				width: 45%;
			}
			@include breakpoint-991{
				width: 100%;
				margin-bottom: 20px;
			}
		}
	}
	.trv-nl-large-text{
		color: $clr-yellow;
		font-family: $heading-font;
		font-size: 60px;
		line-height: 0.75;
		padding-bottom: 5px;
		span{
			color: $clr-white;
			display: inline-block;
		}
		@include breakpoint-991{
			font-size: 46px;
			text-shadow: none;
		}
		@include breakpoint-420{
			font-size: 28px;
		}
	}

	@include breakpoint-767{
		display: block; 
	}
	
	.trv-nl-title{
		color: $clr-white;
		font-size: 20px;
		font-weight: 500;
		font-family: $font-style2;
		@include breakpoint-767{
			margin-bottom: 20px;
		}
		@include breakpoint-420{
			font-size: 16px;
		}
	}
	.trv-nl-section{
		padding:6px;
		background-color: $bgcolor2;
		border-radius: 50px;
		max-width: 428px;
		flex: 1;
 		height: 80px;
		@include breakpoint-991{
			max-width: 100%;
		}
		@include breakpoint-400{
			padding: 0px;
			border: none;
			background-color: transparent;
		}
	}

	&.formid{
		position: relative;
		z-index: 1;
		&:after{
			content: '';
			height: 80px;
			left: 0px;
			right: 0px;
			background-color: $bgcolor2;
			position: absolute;
			z-index: -1;
		}
	}

	&.trv-full-bx{
		background-color: $clr-yellow;
		&:after{
			display: none;
		}
		.container{
			padding-left: 0px;
			padding-right: 0px;
		}
	}
}

/** - Tv booking step style1 start */
.trv-step-bx1-wrap{
	background-color: $clr-white;
}
.trv-step-bx1{
	background-color: $clr-white;
	border: 1px solid $bgcolor2;
	border-radius: 30px 200px 30px 30px;
	padding: 40px;
	box-shadow: 0px 28px 36px rgba(41, 137, 145, 0.2);

	.trv-tp-part{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin-bottom: 45px;
		.trv-num{
			width: 80px;
			height: 80px;
			align-items: center;
			justify-content: center;
			display: flex;
			background-color: $clr-primary;
			border-radius: 20px;
			font-family: $font-style2;
			font-size: 42px;
			color: $clr-white;
			font-weight: 900;
		}
		.trv-icon-back{
			width: 100px;
			height: 100px;
			background-color: $clr-yellow;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: -20px;
			.trv-icon-front{
				background-color: $clr-white;
				width: 90px;
				height: 90px;
				border-radius: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				img{
					max-width: 48px;
					width: 100%;
					filter: brightness(0) saturate(100%) invert(25%) sepia(21%) saturate(4469%) hue-rotate(154deg) brightness(93%) contrast(95%);
				}
			}
		}
	}
	.trv-title{
		font-family: $heading-font;
		color: $clr-primary;
		font-size: 24px;
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	p{
		color: $common-font-color;
		margin: 0px;
	}

}
.trv-hor-add{
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: $clr-yellow;
	height: 184px;
	border-radius: 20px;
	overflow: hidden;
	background-image: url(../images/add-hr-cloud.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 50px 60px;
	@include breakpoint-1024{
		padding: 30px;
		height: auto;
	}
	@include breakpoint-991{
		display: block;
		text-align: center;
		padding: 30px 20px 20px 20px;
	}
	.ofr-price{
		display: flex;
		align-items: end;

		@include breakpoint-991{
			justify-content: center;
			margin-bottom: 15px;
		}

		.lg-title{
			font-style: normal;
			font-weight: 900;
			font-size: 120px;
			line-height: 0.75;
			color: $clr-white;
			font-family: $font-style2;
			margin-bottom: 0px;
			margin-right: 18px;
			@include breakpoint-1365{
				font-size: 80px;
			}
			
			
		}
		.per-off{
			display: block;
			font-style: normal;
			font-weight: 900;
			font-size: 20px;
			line-height: 24px;
			color: $clr-primary;
			text-transform: uppercase;
			span{
				display: block;
			}
		}
	}
	.trv-hor-add-mid{
		font-family: $font-style3;
		font-size: 50px;
		line-height: 74px;
		color: $clr-primary;
		flex: 1;
		margin: 0px 20px;
		@include breakpoint-1365{
			font-size: 40px;
			line-height: normal;
		}
		@include breakpoint-1199{
			font-size: 28px;
		}
		@include breakpoint-991{
			margin-bottom: 15px;
		}
		.sm-title{
			font-family: $font-style2;
			color: $clr-white;
			font-weight: 600;
			font-size: 18px;
			line-height: 24px;
			display: block;
			padding-bottom: 10px;
		}
	}

}

/** - Tv booking step style2 */
.trv-step-bx2-wrap{
	margin-right: 25px;
	@include breakpoint-767{
		margin-right: 0px;
	}
}
.trv-step-bx2{
	margin-bottom: 20px;
	background-color: $clr-white;
	border: 1px solid $bgcolor2;
	padding: 10px 10px 10px 50px;
	box-shadow: 0px 27px 35.9px rgba(41, 137, 145, 0.2);
	border-radius: 0px 200px 200px 0px;
	position: relative;
	margin-left: 50px;
	@include breakpoint-400{
		margin-left: 0px;
		padding: 15px;
		border-radius:20px;
	}
	.trv-tp-part{
		display: flex;
		align-items: center;
		justify-content: space-between;
		@include breakpoint-400{
			display: block;
			text-align: center;
		}
		.trv-num{
			width: 80px;
			height: 80px;
			min-width: 80px;
			align-items: center;
			justify-content: center;
			display: flex;
			background-color: $clr-primary;
			border-radius: 20px;
			font-family: $font-style2;
			font-size: 42px;
			color: $clr-white;
			font-weight: 900;
			position: absolute;
			left: -50px;
			top: 50%;
			transform: translateY(-50%);
			@include breakpoint-400{
				position: inherit;
				transform: none;
				margin: 0px auto 20px;
			}
		}
		.trv-icon-back{
			width: 100px;
			height: 100px;
			min-width: 100px;
			background-color: $clr-yellow;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 0px;
			@include breakpoint-420{
				width: 70px;
				height: 70px;
				min-width: 70px;
			}
			@include breakpoint-400{
				margin: 20px auto 0px;
			}
			.trv-icon-front{
				background-color: $clr-white;
				width: 90px;
				height: 90px;
				min-width: 90px;
				border-radius: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				@include breakpoint-420{
					width: 60px;
					height: 60px;
					min-width: 60px;
				}
				img{
					max-width: 48px;
					width: 100%;
					filter: brightness(0) saturate(100%) invert(25%) sepia(21%) saturate(4469%) hue-rotate(154deg) brightness(93%) contrast(95%);
					@include breakpoint-420{
						max-width: 34px;
					}
				}
			}
		}
	}
	.trv-title{
		font-family: $heading-font;
		color: $clr-primary;
		font-size: 24px;
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 10px;
		@include breakpoint-768{
			font-size: 20px;
		}
	}
	p{
		color: $common-font-color;
		margin: 0px;
	}

}
/** - Tv guide style 1 */

.trv-guide-bx1-wrap{
	background-color: $bgcolor2;
	padding: 50px;
	@include breakpoint-1366{
		padding: 36px;
	}
	@include breakpoint-1365{
		padding: 25px;
	}
	@include breakpoint-768{
		padding: 30px 36px;
	}
	@include breakpoint-575{
		padding: 50px 12px;
	}
	@include breakpoint-400{
		padding: 0px;
	}
	.trv-guide-bx1-section{
		background-color: $clr-white;
		border-radius: 30px;
		overflow: hidden;
		padding: 120px 0px 90px 0px;
		position: relative;
  		overflow: hidden;
		z-index: 1;
		@include breakpoint-1024{
			padding: 50px 20px 2px 20px;
		}
		@include breakpoint-575{
			padding: 50px 0px 2px 0px;
		}
		@include breakpoint-400{
			border-radius: 0px;
		}
			.trv-yl-shedow-left{
				position: absolute;
				width: 600px;
				height: 550px;
				left:-300px;
				top:50%;
				background: rgba(255, 170, 13, 0.1);
				filter: blur(100px);
				z-index: -1;
			}
			.trv-yl-shedow-right{
				position: absolute;
				width: 600px;
				height: 500px;
				right: -300px;
				top: 50%;
				background: rgba(41, 137, 145, 0.1);
				filter: blur(100px);
				z-index: -1;
			}
			.trv-bl-shedow-top{
				position: absolute;
				width: 600px;
				height: 550px;
				left:50%;
				transform: translateX(-50%);
				top:-200px;
				background: rgba(255, 170, 13, 0.1);
				filter: blur(100px);
				z-index: -1;

			}
	}
}
.trv-guide-left-media-section-wrap{
	display: flex;
	align-items: center;
	@include breakpoint-1199{
		justify-content:center;
	}
}
.trv-guide-left-media-section{
	margin-left: -184px;
	text-align: center;
	position: relative;
	z-index: 1;
	width: 765px;
	@include breakpoint-1800{
		width: 665px;
		margin-left: -100px;
	}
	@include breakpoint-1680{
		margin-left: -50px;
	}
	@include breakpoint-1600{
		margin-left: 0px;
		width: 600px;
	}
	@include breakpoint-1440{
		margin-left: 50px;
		width: 500px;
	}
	.trv-guide-left-media-title{
		padding-top: 90px;
		font-family: $font-style3;
		font-weight: 400;
		font-size: 52px;
		line-height:1.2;
		color: $clr-primary;
		padding-bottom: 25px;
		@include breakpoint-1440{
			font-size: 40px
		}
		@include breakpoint-540{
			font-size: 28px
		}
		span{
			font-family: $font-style3;
			font-size: 100px;
			line-height: 1;
			color:$clr-white;
			text-shadow: 2px 5px 0px rgba(41, 137, 145, 0.2);
			display: block;
			@include breakpoint-1440{
				font-size: 70px
			}
			@include breakpoint-540{
				font-size: 40px;
				text-shadow: 2px 0px 0px rgba(41, 137, 145, 0.2);
			}
		}
	}
	.cir-pic{
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: -1;
		animation: spinZ 200s linear infinite;
		
	}
	.girl-withcity{
		right: 40px;
 		position: relative;
	}
}

.trv-guide-bx1{
	background-color: $clr-white;
	padding: 15px;
	box-shadow: 0px 18px 18px rgba(0, 106, 114, 0.10);
	border-radius: 30px;
	text-align: center;
	margin-bottom: 30px;
	.media{
		margin-bottom: 20px;
		img{
			border-radius: 30px;
			width: 100%;
		}
	}
	.trv-guide-name{
		font-family: $heading-font;
		font-size: 28px;
		font-weight: 500;
		line-height: 1.2;
		margin: 10px 0px;
		@include breakpoint-768{
			font-size: 22px;
		}
		a{
			transition: $transition;
			color: $clr-primary;
			&:hover{
				color: $clr-yellow;
			}
		}
	}
	span{
		font-family: $font-style2;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
		color: $clr-yellow;
		margin-bottom: 15px;
		display: inline-block;
	}
}

/** - Tour guide detail */
.trv-guide-det-wrap{
	background-color: $bgcolor2;
	padding: 50px;
	@include breakpoint-1024{
		padding: 50px 20px 50px 20px;
	}
	.trv-guide-det-section{
		background-color: $clr-white;
		border-radius: 30px;
		overflow: hidden;
		padding: 120px 0px 90px 0px;
		position: relative;
		overflow: hidden;
		@include breakpoint-1024{
			padding: 20px 10px 0px 10px;
		}
		@include breakpoint-360{
			padding: 20px 0px 0px 0px;
		}
	}
}

/** - Tour guide detail */

.trv-guide-det-section{
	background-color: $clr-white;
	.trv-guide-dtl-left-part{
		padding-right:24px;
		@include breakpoint-1024{
			padding-right:0px;
		}
	}
}

.trv-guide-dtl-right-part{
	.title{
		font-family: $heading-font;
		font-size: 46px;
		font-weight: 700;
		color: $clr-primary;
		line-height: 1.2;
		margin-bottom: 20px;
		@include breakpoint-1024{
			font-size: 30px;
		}
	}
	.text{
		font-size: 16px;
		font-weight: 400;
		color: $common-font-color;
		line-height: 1.4;
		margin-bottom: 30px;
	}
	.list-st-1{
		padding: 0px;
		list-style: none;
		margin-bottom: 30px;
			li{
				font-family: $font-style2;
				font-size: 16px;
				font-weight: 400;
				color: $clr-primary;
				margin-bottom: 10px;
				span{
					font-family: $heading-font;
					font-size: 20px;
					font-weight: 500;
					color: $clr-primary;
					margin-right: 45px;
					min-width: 100px;
					display: inline-block;
					@include breakpoint-400{
						display: block;
					}
				}
				&:last-child{
					margin-bottom: 0px;	
				}
			}
	}
	.list-title{
		font-family: $heading-font;
		font-size: 28px;
		font-weight: 700;
		color: $clr-primary;
		line-height: 1.2;
		margin-bottom: 30px;
		@include breakpoint-1024{
			font-size: 22px;
		}
	}
	
}
.trv-list-st2{
	padding: 0px;
	list-style: none;
	margin-bottom: 30px;
	li{
		font-family: $font-style2;
		font-size: 16px;
		font-weight: 400;
		color: $common-font-color;
		line-height: 1.4;
		margin-bottom: 15px;
		position: relative;
		padding-left: 40px;
		i{
			color: $clr-yellow;
			font-size: 24px;
			position: absolute;
			left: 0px;
			top: -3px;
		}
		span{
			font-weight: 600;
		}
		&:last-child{
		margin-bottom: 0px;
		}
	}
}

/** - Tv testimo style1 start */
.trv-testimo-bx-wrap{
	background-color: $bgcolor1;
	padding-bottom: 106px;
	background-position: center center;
	background-repeat: no-repeat;
}
.trv-testimo-bx1{
	margin: 0px 70px 50px;
	@include breakpoint-1024{
		margin: 0px 10px 50px;
	}
	.media{
		margin-bottom: 30px;
		position: relative;
		max-width: 306px;
		@include breakpoint-767{
			margin: 0px auto 30px;
		}
		img{
			border-radius: 30px;
		}
	}
	.rating{
		display: inline-flex;
		align-items: center;
		background-color: $clr-primary;
		border-radius: 0px 20px 20px 20px;
		position: absolute;
		left: 0px;
		bottom: -10px;
		padding: 5px 15px;

		i{
			color: $clr-yellow;
			font-size: 16px;
			margin-right: 3px;
		}
	}
	.info{
		.trv-testimo-head{
			display: flex;
			align-items: start;
			justify-content: space-between;
			margin-bottom: 25px;
			.left-part{
				.trv-testimonial-name{
					font-family: $font-style3;
					font-size: 36px;
					font-weight: 400;
					color: $clr-primary;
					margin-bottom: 0px;
					@include breakpoint-991{
						font-size: 28px;
					}
				}
				.trv-testimonial-position{
					font-family: $heading-font;
					font-size: 20px;
					font-weight: 500;
					color: $clr-yellow;
					display: inline-block;
				}
			}
			.right-part{
				img{
					max-width: 70px;
					max-height: 58px;
					width: 100%;
					filter: brightness(0) saturate(100%) invert(25%) sepia(21%) saturate(4469%) hue-rotate(154deg) brightness(93%) contrast(95%);
					@include breakpoint-991{
						max-width: 44px;
					}
				}
			}
		}
		p{
			font-family: $heading-font;
			font-size: 24px;
			color: $common-font-color;
			margin-bottom: 0px;
			@include breakpoint-991{
				font-size: 18px;
			}
			@include breakpoint-767{
				text-align: center;
			}
		}
	}
}
/** - Tv testimo style2 start */

.trv-testimo-bx2{
	display: flex;
	align-items: center;
	background-color: $clr-white;
	@include breakpoint-767{
		display: block;
	}
	.media{
		margin-bottom: 0px;
		position: relative;
		max-width: 375px;
		z-index: 1;
		margin-right: 95px;
		@include breakpoint-991{
			max-width: 250px;
        	margin-right: 30px;
		}
		@include breakpoint-767{
			margin: 0px auto 30px;
		}
		&:after{
			content: '';
			width: 330px;
			height: 330px;
			border-radius:50% ;
			background-color: $clr-primary;
			position: absolute;
			right: -42px;
			top: 50%;
			transform: translateY(-50%);
			z-index: -1;
			@include breakpoint-1199{
				right: -25px;
			}
			@include breakpoint-991{
				display: none;
			}
		}
		&:before{
			content: '';
			width: 380px;
			height: 380px;
			border-radius:50% ;
			background-color: $clr-yellow;
			opacity: 0.1;
			position: absolute;
			right: -94px;
			top: 50%;
			transform: translateY(-50%);
			z-index: -1;
			@include breakpoint-1199{
				right: -60px;
			}
			@include breakpoint-991{
				display: none;
			}
		}
		img{
			border-radius: 30px;
		}
	}
	.rating{
		float: right;
		@include breakpoint-767{
			float: none;
		}
		@include breakpoint-480{
			text-align: center;
		}
		i{
			color: $clr-yellow;
			font-size: 16px;
			margin-right: 3px;
		}
	}
	.info{
		max-width: 490px;
		margin-left: auto;
		@include breakpoint-991{
			max-width: 340px;
			margin-right: auto;
			margin-left: inherit;
		}
		@include breakpoint-767{
			margin: 0px auto 30px;
		}
		.trv-testimo-head{
			display: flex;
			align-items: start;
			justify-content: space-between;
			margin-bottom: 25px;
			@include breakpoint-480{
				flex-direction: column-reverse;
				align-items: center;
				text-align: center;
			}
			.left-part{
				.trv-testimonial-name{
					font-family: $font-style3;
					font-size: 36px;
					font-weight: 400;
					color: $clr-primary;
					margin-bottom: 0px;
					@include breakpoint-991{
						font-size: 28px;
					}
				}
				.trv-testimonial-position{
					font-family: $heading-font;
					font-size: 20px;
					font-weight: 500;
					color: $clr-yellow;
					display: inline-block;
					@include breakpoint-991{
						font-size: 18px;
					}
				}
			}
			.right-part{

				img{
					max-width: 70px;
					max-height: 58px;
					width: 100%;
					filter: brightness(0) saturate(100%) invert(25%) sepia(21%) saturate(4469%) hue-rotate(154deg) brightness(93%) contrast(95%);
					@include breakpoint-991{
						max-width: 44px;
					}
					@include breakpoint-480{
						margin-bottom: 10px;
					}
				}
			}
		}
		p{
			font-family: $heading-font;
			font-size: 24px;
			color: $common-font-color;
			margin-bottom: 20px;
			@include breakpoint-991{
				font-size: 18px;
			}
			@include breakpoint-480{
				text-align: center;
			}
		}
	}
}
.testimonial-thum-sld{
	height: 370px;
	overflow: hidden;
	width: 115px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 515px;
	@include breakpoint-1199{
		height: auto;
        top: auto;
        left: 0px;
        transform: none;
        width: 250px;
		position: inherit;
		margin-left: 0;
        margin-top: 20px;
	}
	@include breakpoint-767{
		margin: 0px auto;
	}
	img{
		transition: $transition;
	}
	.swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active.swiper-slide-thumb-active,
	.swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active{
		img{
			margin-left: 30%;
			@include breakpoint-1199{
				margin-left: 0%;
			}
		}
	}
}
.trv-testimonial-st2{position: relative;}
.trv-testimo-bx2-thumb{
	transition: $transition;
	img{
		width: 76px;
		height: 76px;
		object-fit: cover;
		object-position: center;
		border-radius: 20px;
		cursor: pointer;
	}
}

.testimonial-content-sld-control{
	position: absolute;
	right: 360px;
	bottom: 25px;
	width: 140px;
	height: 60px;
	@include breakpoint-991{
		height: auto;
		position: static;
	}
	.swiper-button-next{
		margin-top: -40px;
		@include breakpoint-991{
			margin-top: 0px;
		}
	}
	.swiper-button-prev{
		margin-top: -40px;
		@include breakpoint-991{
			margin-top: 0px;
		}
	}
}
.trv-testimonial-st2-wrap{
	padding: 120px 0px;
	background-color: $clr-white;
	@include breakpoint-1024{
		padding: 50px 0px;
	}
	.trv-gradi-text{
		position: relative;
		font-weight: 700;
		font-size: 160px;
		line-height: 192px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		background: linear-gradient(to bottom, #066168 15%, #ffaa0d4d 60%, #fff 85%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
		@include breakpoint-1365{
			font-size: 110px;
			line-height: normal;
			text-align: center;
		}
		@include breakpoint-1024{
			font-size: 75px;
		}
		@include breakpoint-767{
			font-size: 60px;
        	margin-bottom: 30px;
		}
		@include breakpoint-540{
			display: none;
		}
		img{
			position: absolute;
			top: -20px;
			left: 50%;
			transform: translateX(-50%);
			@include breakpoint-1199{
				width: 40%;
			}
			@include breakpoint-1024{
				width: 28%;
			}
			@include breakpoint-991{
				width: 40%
			}
			@include breakpoint-767{
				width: 54%;
        		top: -26px;
			}


		}

	}
}

.trv-testimonial-st1-wrap{
	padding: 120px 0px;
	background-color: $clr-white;
	@include breakpoint-1024{
		padding: 50px 0px 0px;
	}
}

/** - We Recommend 2 section start */
.trv-we-recommend{
	background-color: $bgcolor2;
}

.trv-we-rec-media-main-wrap{
	position: relative;
	@include breakpoint_1199{
		margin-top: 100px;
	}
	.trc-we-rec-circle-bx{
		margin-top: 12px;
		width: 420px;
		height: 420px;
		border: 20px solid $clr-white;
		border-radius: 50%;
		box-shadow: 0px 27px 35.9px rgba(41, 137, 145, 0.2);
		@include breakpoint_1199{
			width: 300px;
			height: 300px;
			border: 10px solid $clr-white;
		}
		
		img{
			width: 100%;
			border-radius: 50%;
		}
	}
	.trv-we-rec-media-main{
		position: absolute;
		right: -175px;
		bottom: 0px;
		@include breakpoint-1680{
			right: -130px;
		}
		@include breakpoint-1600{
			right: -50px;
		}
		@include breakpoint-1440{
			right: 0px;
		}
		@include breakpoint-1365{
			width: 90%;
		}
		@include breakpoint_1199{
			position: inherit;
		}
	}
}
.trv-we-recommend-content{
	margin-bottom: 120px;
	position: relative;
	@include breakpoint-1024{
		margin-bottom: 30px;
		.section-head.trv-head-title-wrap.left-position{
			.trv-head-discription{
				padding-right: 50px;
			}
		} 
	}
	.trv-head-discription{
		padding-right: 35px;
		@include breakpoint-1365{
			padding-right: 0px;
		}
	}
	.trv-we-rec-mid-section{
		margin-bottom: 20px;
		display: flex;
		@include breakpoint-540{
			display: block;
		}
	}
	.trv-24-7-bx{
		width: 140px;
		height: 204px;
		padding: 9px;
		background-color: $clr-white;
		border-radius: 30px;
		display: flex;
		display: flex;
		min-width: 140px;
		margin-right: 30px;
		@include breakpoint-540{
			width: 100%;
			height: auto;
			margin-right: 0px;
			margin-bottom: 20px;
		}
		.trv-24-7-info{
			background-color: $clr-primary;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
			padding: 10px;
			border-radius: 20px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			@include breakpoint-540{
				width: 100%;
				flex-direction: inherit;
			}
			span{display: block;}
			.nbr{
				color: $clr-yellow;
				font-size: 38px;
				font-weight: 900;
				@include breakpoint-540{
					margin-right: 5px;
				}
			}
			.info{
				color: $clr-white;
				font-size: 24px;
				font-family: $heading-font;
				font-weight: 500;
			}
		}
	}
}

.trv-we-rec-bottom-section{
	display: flex;
	align-items: center;
	@include breakpoint-420{
		display: block;
		.trv-hpy-cus{
			padding-top: 10px;
		}
	}
	.trv-we-rec-btn{
		margin-right:12px;
	}
}
.trv-hpy-cus{
	display: flex;
	.trv-hpy-cus-count{
		span{
			display: block;
			font-weight: 900;
			font-size: 22px;
			color: $clr-primary;
		}
		p{
			margin-bottom: 0px;
			text-transform: uppercase;
			font-weight: 500;
			font-size: 12px;
		}
	}
}

.trv-icon-bx-st1{
	display: flex;
	.trv-icon-bx-media{
		background-image: url(../images/trv-icon/Icon-Bg.png);
		background-repeat: no-repeat;
		width: 85px;
		height: 85px;
		min-width: 85px;
		background-size: 100%;
		margin-right: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		img{
			max-width: 48px;
			filter: brightness(0) saturate(100%) invert(12%) sepia(96%) saturate(4615%) hue-rotate(176deg) brightness(92%) contrast(95%);
		}
	}
	.trv-icon-bx-title{
		font-size: 24px;
		color: $clr-primary;
		font-weight: 500;
		margin-bottom: 12px;
	}
	.p-text{
		margin-bottom: 0px;
	}
}

.trv-cus-pic-box { 
	display:flex; 
	align-items:center;
	margin-right: 20px;
	.trv-cus-pic-box-pic { 
		width:36px; 
		height:36px; 
		display: inline-flex; 
		border-radius: 50px; 
		overflow: hidden; 
		border: 1px solid $clr-white; 
		margin-left:-10px; 
	}
	.trv-cus-pic-box-pic.first-bx{
		margin-left: 0px;
	} 
}

.trv-year-section{
	position: absolute;
	z-index: 1;
	top: 30px;
	right: -145px;
	animation: slide-top 8s linear infinite alternate-reverse;
	@include breakpoint-1680{
		right: -80px;
	}
	@include breakpoint-1600{
		right: 10px;
	}
	@include breakpoint_991{
		top: 100px;
	}
	.trv-year-media{
		position: absolute;
		left: -110px;
		bottom: 5px;
		@include breakpoint-575{
			left: -75px;
			bottom: 1px;
			width: 260px
		}
	}
	.trv-year-info{
		background-color: $clr-white;
		border-radius: 20px;
		padding: 4px 20px 4px 55px;
		display: inline-flex;
		align-items: center;
		width: 340px;
		@include breakpoint-575{
			width: 240px;
		}
		.numbr{
			font-family: $font-style2;
			font-weight: 900;
			font-size: 83px;
			line-height:1;
			color:$clr-green;
			margin-bottom: 0px;
			text-shadow: 0px 4px 0px #066168;
			margin-right: 15px;
			@include breakpoint-575{
				font-size: 50px;
			}
		}
		span{
			font-weight: 900;
			font-size: 28px;
			line-height: 1.2;
			color: $clr-primary;
			@include breakpoint-575{
				font-weight: 700;
				font-size: 18px;
			}
		}
	}
}

/** - We Recommend 2 section End */
.trv-we-recommend2{
	background-color: $clr-white;
	.trv-we-rec2-media-main-wrap{
		position: relative;
		padding-top: 70px;
		margin-right: 24px;
		height: 610px;
		@include breakpoint-991{
			margin-right: 0px;
			margin-bottom: 30px;
		}
		@include breakpoint-575{
			height: 460px;
		}
		.trc-we-rec-circle-bx2{
			margin-top: 12px;
			width: 390px;
			height: 390px;
			border: 20px solid $clr-white;
			border-radius: 50%;
			box-shadow: 0px 27px 35.9px rgba(41, 137, 145, 0.2);
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50% , -50%);
			z-index: 1;
			@include breakpoint-1024{
				width: 300px;
				height: 300px;
				border: 10px solid $clr-white;
			}
			@include breakpoint-767{
				width: 270px;
				height: 270px;
			}
			@include breakpoint-420{
				width: 200px;
				height: 200px;
			}
			img{
				width: 100%;
				border-radius: 50%;
			}
		}
		.trc-we-rec-l-bx{
			max-width: 278px;
			overflow: hidden;
			@include breakpoint-575{
				max-width: 200px;
			}
			@include breakpoint-360{
				max-width: 160px;
			}
			img{
				width: 100%;
				border-radius: 100px 30px 100px 30px;
			}
		}
		.trc-we-rec-r-bx{
			max-width: 278px;
			position: absolute;
			right: 0px;
			bottom: 0px;
			@include breakpoint-575{
				max-width: 200px;
			}
			@include breakpoint-360{
				max-width: 160px;
			}
			img{
				width: 100%;
				border-radius: 100px 30px 100px 30px;
			}
		}
		.trc-we-rec-plane-bx{
			position: absolute;
			top: 0px;
			right: 0px;
			z-index: 2;
			animation: slide-left 7s linear infinite alternate-reverse both;
			@include breakpoint-575{
				width: 200px;
				img{
					width: 100%;
				}
			}
		}
	}

	.trv-we-rec3-media-main-wrap{
		position: relative;
		margin-right: 24px;
		.trc-we-rec3-circle-bx1{
			margin-top: 12px;
			width: 390px;
			height: 390px;
			border: 20px solid $bgcolor2;
			border-radius: 50%;
			position: absolute;
			right: 0px;
			bottom: 70px;
			z-index: 1;
			@include breakpoint-1199{
				width: 280px;
				height: 280px;
			}
			@include breakpoint-575{
				border: 10px solid $bgcolor2;
				width: 200px;
				height: 200px;
			}
			
			img{
				width: 100%;
				border-radius: 50%;
			}
		}
		.trc-we-rec3-circle-bx2{
			margin-top: 12px;
			width: 200px;
			height: 200px;
			border: 10px solid $clr-white;
			border-radius: 50%;
			box-shadow: 0px 27px 35.9px rgba(41, 137, 145, 0.2);
			position: absolute;
			left: 350px;
			top: 13px;
			z-index: 1;
			@include breakpoint-1199{
				left: 300px;
			}
			@include breakpoint-575{
				right: 10px;
        		left: auto;
				width: 140px;
				height: 140px;
			}
			@include breakpoint-480{
				display: none;
			}
			img{
				width: 100%;
				border-radius: 50%;
			}
		}
		.trc-we-rec3-l-bx{
			max-width:376px;
			position: relative;
			z-index: 1;
			@include breakpoint-480{
				margin: 0px auto;
			}
			&:before{
				content: '';
				width: 390px;
				height: 390px;
				position: absolute;
				left: 0px;
				top: 120px;
				background-color: $clr-light-yellow;
				border-radius: 50%;
				z-index: -1;
				@include breakpoint-480{
					width: 280px;
					height: 280px;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			img{
				width: 100%;
			}
		}
	}
	
}
.trv-we-rec-mid2-section{
	margin-bottom: 50px;
}
.trv-icon-bx-st2{
	display: flex;
	align-items: center;
	max-width: 416px;
	padding: 15px 40px;
	background: $clr-white;
	border: 1px solid rgba(41, 137, 145, 0.2);
	border-radius: 20px;
	@include breakpoint-991{
		max-width: 100%;
	}
	@include breakpoint-360{
		padding: 15px;
	}
	.trv-icon-bx-media{
		background-repeat: no-repeat;
		width: 55px;
		height: 55px;
		min-width: 55px;
		background-size: 100%;
		margin-right: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		img{
			max-width: 48px;
			filter: brightness(0) saturate(100%) invert(12%) sepia(96%) saturate(4615%) hue-rotate(176deg) brightness(92%) contrast(95%);
		}
	}
	.trv-icon-bx-title{
		font-size: 24px;
		color: $clr-primary;
		font-weight: 500;
		margin-bottom: 12px;
		@include breakpoint-400{
			font-size: 20px
		}
	}
	.p-text{
		margin-bottom: 0px;
	}
}
.trv-year-section2{
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 90px;
	@include breakpoint-1365{
		position: inherit;
		width: auto;
		padding-top: 20px;
	}
	.trv-year-info{
		display: inline-flex;
		align-items: center;
		width: 340px;
		position: absolute;
		left: 0%;
		text-align: left;
		transform: rotate(-90deg);
		transform-origin: 0 0;
		padding-left: 106px;
		@include breakpoint-1365{
			position: inherit;
			padding-left: 0px;
			transform: inherit;
		}
		@include breakpoint-420{
			width: 100%;
		}
		.numbr{
			font-family: $font-style2;
			font-weight: 900;
			font-size: 83px;
			line-height:1;
			color:$clr-yellow;
			margin-bottom: 0px;
			text-shadow: 0px 4px 0px #066168;
			margin-right: 15px;
			@include breakpoint-420{
				font-size: 48px
			}
		}
		span{
			font-weight: 900;
			font-size: 28px;
			line-height: 1.2;
			color: $clr-primary;
			@include breakpoint-420{
				font-size: 20px
			}
		}
	}
}

/** - Video with acchivment section start */

.trv-achivment-section{
	padding: 120px 0px;
	background-color: $bgcolor2;
	@include breakpoint_1024{
		padding:50px 0px;
	}
	.trv-achivment-row{
		position: relative;
		border-radius: 60px;
		overflow: hidden;
		.parallax-section{
			height: 640px;
		}
		.trv-vid-st2{
			height: 800px;
			opacity: 1;
			background-position: center top;
			@include breakpoint-767{
				background-position: 35%;
			}
		}
	}
	.trv-say-yesbx-wrap{
		position: absolute;
		height: 430px;
		border-radius: 60px;
		border: 10px solid rgba(255, 255, 255, 0.2);
		top: 50px;
		right: 50px;
		left: 50px;
		@include breakpoint-575{
			top: 20px;
			left: 20px;
			right:20px;
			border: 6px solid rgba(255, 255, 255, 0.2);
		}
	}
	.trv-say-yesbx{
		max-width: 510px;
		height: 287px;
		background-image: url(../images/say-yes.png);
		background-size: cover;
		width: 100%;
		position: absolute;
		top: 90px;
  		right: -20px;
		z-index: 10;
		padding: 80px 10px 10px 130px;
		@include breakpoint-1200{
			max-width: 360px;
        	height: 200px;
        	padding: 60px 0px 0px 80px;
		}
		@include breakpoint-991{
			top: 0px;
			left: 50%;
			right: auto;
			transform: translateX(-50%);
		}
		@include breakpoint-575{
			background-position: right;
		}
		@include breakpoint-420{
			background-position: right;
			padding: 90px 0px 0px 80px;
		}
		@include breakpoint-400{
			height: 154px;
			padding: 60px 0px 0px 60px;
		}
		.say-title,
		.say-title2{
			font-family: $font-style3;
			color: $clr-white;
			font-size: 40px;
			line-height: 1;

			span{
				font-size: 100px;
				color: $clr-yellow;
				@include breakpoint-1200{
					font-size: 60px;	
				}
				@include breakpoint-480{
					font-size: 30px;	
				}
			}
			@include breakpoint-1200{
				font-size: 28px;	
			}
			@include breakpoint-400{
				font-size: 20px;	
			}
		}
		
	}
}
.trv-vid-st2-counter{
	height: 160px;
	padding: 40px 40px 10px 40px;
	position: absolute;
	bottom: 0px;
	z-index: 10;
	right: 0px;
	left: 0px;
	background: rgba(6, 97, 104, 0.62);
	backdrop-filter: blur(5px);
	@include breakpoint_1199{
		height: 120px;
		padding: 30px 40px 10px 40px;
	}
	@include breakpoint_1199{
		height: auto;
	}
	@include breakpoint_480{
		padding: 20px;
	}

}
.trv-counter-outer-one{
	display: flex;
	@include breakpoint_400{
		display: block;
	}
	.trv-counter-media{
		width: 50px;
		min-width: 50px;
		margin-right: 30px;
		@include breakpoint-1199{
			width: 30px;
			min-width: 30px;
			margin-right: 15px;
		}
		img{
			width: 100%;
		}
	}
	.trv-icon-content-info{
		.trv-icon-title{
			font-family: $heading-font;
			font-weight: 500;
			font-size: 24px;
			line-height: 32px;
			margin-bottom: 20px;
			color:$clr-white;
			@include breakpoint-1199{
				font-size: 20px;
				margin-bottom: 10px;
			}
			@include breakpoint-480{
				font-size: 16px;
			}
		}
	}
	.counter-out{
		b{
			font-weight: 900;
			font-size: 42px;
			line-height: 50px;
			line-height: 0.75;
			font-family: $font-style2;
			color: $clr-white;
			@include breakpoint_1199{
				font-size:28px;
				font-weight: 800;
			}
			@include breakpoint_480{
				font-size:20px;
			}
		}
	}
	.counter{
		font-weight: 900;
		font-size: 42px;
		line-height: 50px;
		line-height: 0.75;
		font-family: $font-style2;
		color: $clr-white;
		@include breakpoint_1200{
			font-size:38px;
		}
		@include breakpoint_1199{
			font-size:28px;
			font-weight: 800;
		}
		@include breakpoint_480{
			font-size:20px;
		}
		
	}
	
}
/** - Video with acchivment section end */
.trv-vid-style2-wrap{
	height: 660px;
	overflow: hidden;
	position: relative;
	background-size: cover;
	@include breakpoint-1199{
		height: 500px;
	}
	@include breakpoint-991{
		height: 400px;
	}
	@include breakpoint-767{
		background-position: right;
	}
	.trv-vid-full{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		max-width: auto;
		object-fit: cover;
		width: 100%;
		height: 100%;
		margin: 0;
		z-index: 0;
	}
	.video-section{
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
	}
}
/** - Counter style 2 */
.trv-counter-outer-two-wrap{
	padding: 40px 40px 10px 40px;
	background-color: $clr-primary;
	@include breakpoint-1440{
		padding: 40px 0px 10px;
	}
	@include breakpoint-360{
		.col-6{
			width: 100%;
		}
	}
	.trv-counter-outer-two{
		display: flex;
		border: 1px dashed rgba(255, 255, 255, 0.2);
		padding: 35px;
		@include breakpoint-1365{
			padding: 20px;
			display: block;
		}
		.trv-counter-media{
			width: 50px;
			min-width: 50px;
			margin-right: 30px;
			@include breakpoint-1366{
				margin-right: 20px;
			}
			@include breakpoint-1365{
				margin-right: 0px;
				margin-bottom: 10px;
			}
			img{
				width: 100%;
			}
		}
		.trv-icon-content-info{
			.trv-icon-title{
				font-family: $heading-font;
				font-weight: 500;
				font-size: 24px;
				line-height: 1.2;
				margin-bottom: 20px;
				color:$clr-white;
				@include breakpoint_991{
					font-size:16px;
					margin-bottom: 5px;
				}
			}
		}
		.counter-out{
			color: $clr-yellow;	
			b{
				font-weight: 900;
				font-size: 42px;
				line-height: 50px;
				line-height: 0.75;
				font-family: $font-style2;
				@include breakpoint_991{
					font-size:20px;
				}
			}
		}
		.counter{
			font-weight: 900;
			font-size: 42px;
			line-height: 50px;
			line-height: 0.75;
			font-family: $font-style2;
			color: $clr-yellow;
			@include breakpoint_991{
				font-size:20px;
			}
			
		}
		
	}
}

/** - Counter style 3 */
.trv-counter-outer-three-wrap{
	padding: 80px;
	background-color: $clr-white;
	@include breakpoint-1024{
		padding: 50px 0px 20px 0px;
	}
	.trv-counter-outer-three{
		position: relative;
		@include breakpoint-1024{
			margin-bottom: 30px;
		}
		.trv-counter-media{
			width: 100px;
			min-width: 100px;
			height: 100px;
			background-color: $clr-primary;
			border-radius: 20px;
			display: flex;
			align-items: baseline;
  			justify-content: flex-start;
			position: absolute;
			left: 0px;
			top: -50px;
			padding: 15px;
			img{
				width: 50px;
				@include breakpoint-1024{
					width: 40px;
				}
			}
		}
		.trv-icon-content-info{
			position: relative;
			z-index: 1;
			padding: 35px;
			margin-top: 50px;
			margin-left: 58px;
			background: rgba(6, 97, 104, 0.05);
			border: 7px solid $clr-white;
			box-shadow: 0px 15px 8px -4px rgba(0, 0, 0, 0.05);
			backdrop-filter: blur(25px);
			border-radius: 30px;
			@include breakpoint-1366{
				margin-left: 38px;
			}
			@include breakpoint-360{
				text-align: center;
				padding: 20px;
			}
			.trv-icon-title{
				font-family: $heading-font;
				font-weight: 500;
				font-size: 24px;
				line-height: 32px;
				margin-bottom: 20px;
				color:$clr-primary;
			}
		}
		.counter-out{
			color: $clr-primary;	
			b{
				font-weight: 900;
				font-size: 42px;
				line-height: 50px;
				line-height: 0.75;
				font-family: $font-style2;
				@include breakpoint_1200{
					font-size:30px;
				}
			}
		}
		.counter{
			font-weight: 900;
			font-size: 42px;
			line-height: 50px;
			line-height: 0.75;
			font-family: $font-style2;
			color: $clr-primary;
			
			
			@include breakpoint_1200{
				font-size:30px;
			}
			@include breakpoint_991{
				font-size:38px;
			}
			@include breakpoint_420{
				font-size:28px;
			}
			
		}
		
	}
	.row{
		[class*='col-']:nth-child(even){
			.trv-counter-media{
				background-color: $clr-yellow;
			}
		}
	}
}

/** - We offer services */
.trv-we-off-service{
	background-color: $clr-primary;
	position: relative;
	overflow: hidden;
	&:before{
		content: '';
		height: 220px;
		background-color: $bgcolor1;
		bottom: 0px;
		left: 0px;
		right: 0px;
		position: absolute;
		z-index: 0;
		@include breakpoint-1199{
			height: 190px;
		}
		@include breakpoint-1024{
			height: 120px;
		}
	}
	.trv-we-off-sevice-row{
		position: relative;
		z-index: 1;
	}
	.trv-we-off-media{
		position: relative;
		z-index: 1;
		@include breakpoint-991{
			margin-bottom: 30px;
		}
		.media1{
			display: block;
			margin-left: 86px;
			padding-bottom: 70px;
			 animation: slide-left 3s linear infinite alternate-reverse both;
			@include breakpoint-991{
				margin:0px auto;
			}
		}
		.media2{
			position: absolute;
			bottom: 0px;
			left: 0px;
			@include breakpoint-991{
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.img-bg-shade{
			position: absolute;
			width: 400px;
			height: 400px;
			left: 50px;
			top:200px;
			background: #1DB7BE;
			filter: blur(100px);
			z-index: -1;
			animation: scale-up-center 2s linear infinite alternate-reverse both;

		}
	}
	.trv-we-off-content{
		position: relative;
		z-index: 1;
		.row{
			display: flex;
			justify-content: center;
		}
		.trv-head-title-wrap{
			margin-right: 90px;
			@include breakpoint-991{
				margin-right: 0px;
			}
		}
		.media1-large{
			border-radius: 200px;
			margin-top: 30px;
			margin-bottom: 30px;
			overflow: hidden;
			img{
				width: 100%;
				height: 200px;
				object-fit: cover;
				@include breakpoint-1199{
					height: 140px;
				}
			}
		}
		
	}
	.trv-left-bulding{
		position: absolute;
		left: 0px;
		bottom: 220px;
	}
	.trv-right-sm-plane{
		position: absolute;
		right: 0px;
		top: 0px;
	}
}
/** - Scale up animation */

.scale-up-center {
	-webkit-animation: scale-up-center 5s linear infinite alternate-reverse both;
	        animation: scale-up-center 5s linear infinite alternate-reverse both;
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/** - Slide left animation */
.slide-left {
	-webkit-animation: slide-left 0.5s linear infinite alternate-reverse both;
	        animation: slide-left 0.5s linear infinite alternate-reverse both;
}

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
}

/** - Service Bx1 */
.trv-servi-bx1{
	position: relative;
	text-align: center;
	background-color: $clr-white;
	margin-left: 12px;
	border-radius: 80px 20px 80px 20px;
	padding: 35px 20px 60px;
	.trv-icon{
		span{
			display: inline-block;
			margin-bottom: 30px;
			img{max-width: 64px; width: 100%; display: inline-block;}
		}
	}
	.trv-icon-content{
		.title{margin-bottom: 15px;}
		.p-text{margin-bottom: 0px;}
	}
	.trv-step-corner-bx{
		position: relative;
		.trv-step-corner{
			position: absolute;
			left: -32px;
			bottom: -60px;
			width: 0;
			height: 0;
			border-bottom: 90px solid #489CF6;
			border-right: 80px solid transparent;
			span{font-size: 12px; line-height: 6px; font-weight: 500;display: block; color: $clr-white; font-family: $heading-font;padding: 48px 10px 0px 10px;}
			.number{font-size: 24px; font-weight: 900; color: $clr-white; padding-left: 10px;}
		}
		&:after{
			content: "";
			position: absolute;
			left: -32px;
			top: -41px;
			width: 0;
			height: 0;
			border-top: 12px solid transparent;
			border-right: 12px solid #297BD4;
			border-bottom: 12px solid transparent;
		}
	}
	
	&.trv-servi-bx-clr1{
		.trv-icon{
			span{
				img{filter: brightness(0) saturate(100%) invert(53%) sepia(72%) saturate(1711%) hue-rotate(188deg) brightness(100%) contrast(94%);}
			}
		}
	}
	&.trv-servi-bx-clr2{
		.trv-icon{
			span{
				img{filter: brightness(0) saturate(100%) invert(64%) sepia(100%) saturate(1157%) hue-rotate(350deg) brightness(103%) contrast(103%);}
			}
		}
		.trv-step-corner-bx{
			.trv-step-corner{
				border-bottom: 90px solid #FFAA0D;
			}
			&:after{
				border-right: 12px solid #BA7D0A;
			}
		}
	}
	&.trv-servi-bx-clr3{
		.trv-icon{
			span{
				img{filter: brightness(0) saturate(100%) invert(67%) sepia(36%) saturate(2222%) hue-rotate(38deg) brightness(102%) contrast(101%);}
			}
		}
		.trv-step-corner-bx{
			position: relative;
			.trv-step-corner{
				border-bottom: 90px solid #85D200;
			}
			&:after{
				border-right: 12px solid #568603;
			}
		}
	}
	  
}

/** - Popular search destination */
.trv-popular-search{
	background-color: $clr-light-yellow;
	.trv-pop-search-carousel-bx{
		padding:40px 0px 5px 0px;
	}
}

.tvr-pop-tour{
	text-align: center;
	.tvr-total-listing{
		font-size: 12px;
		line-height: 14px;
		color: $clr-primary;
		display: inline-flex;
		padding: 6px 10px;
		background-color: $clr-white;
		border: 1px solid rgba(41, 137, 145, 0.2);
		border-radius: 10px;
		i{
			padding-right: 4px;
		}
	}
	.tvr-pop-tour-name{
		font-family:$font-style3;
		font-size: 40px;
		line-height: 58px;
		color: $clr-yellow;
		transition: $transition;
		display: block;
		@include breakpoint-400{
		   font-size: 28px;
		}
		&:hover{
			color: $clr-green;
		}
	}
}

.tvr-large-title-st1{
	margin-left: 50px;
	@include breakpoint-767{
		margin-left: 0px;
		margin-top: 10px;
	}
	.sm-title{
		color: $clr-primary;
		display: block;
		font-family:$heading-font;
		font-weight: 700;
		font-size: 28px;
		margin-bottom: 15px;
	}
	.lg-title{
		font-family:$font-style2;
		margin-bottom: 0px;
		font-style: normal;
		font-weight: 900;
		font-size: 160px;
		line-height: 0.75;
		text-transform: uppercase;
        color: rgba(255, 170, 13, 0.16);
		@include breakpoint-1365{
			font-size: 120px;
		}
		@include breakpoint-1024{
			font-size: 90px;
		}
		@include breakpoint-400{
		   font-size: 60px;
		}
	}
}

.tvr-pop-search-carousel{
	.owl-item:nth-child(even){
		.item{
			.tvr-pop-tour-name{
				color: $clr-primary;
				&:hover{
					color: $clr-green;
				}
			}
		}
	}
}

/** - Explore popular tour */
.trv-popular-tours{
	background-color: $bgcolor1;
	margin: 0px 60px;
	padding-bottom: 106px;
	@include breakpoint-575{
		margin: 0px;
	}
}
.trv-tours-st1-carousal{
	.trv-popular-tour-st1{
		margin: 0px 15px;
	}
}
.trv-popular-tour-st1{
	.trv-media{
		position: relative;
		overflow: hidden;
		border-radius: 30px 30px 0px 0px;
		.trv-tour-duration{
			position: absolute;
			top: 30px;
			left: 0px;
			padding: 10px 20px;
			background-color: $clr-primary;
			color: $clr-white;
			font-weight: 600;
			font-size: 14px;
			border-radius: 0px 50px 50px 0px;
			display: flex;
  			align-items: center;
			i{
				font-size: 20px;
				margin-right: 10px;
			}
			span{display: block;}
		}
		.trv-tour-title{
			position: absolute;
			bottom: 0px;
			left: 0px;
			right: 0px;
			padding: 15px 30px;
			background: #0661684f;
			backdrop-filter: blur(7px);
			transition: $transition;
			.trv-title{
				margin-bottom: 0px;
				font-size: 28px;
				font-weight: 500;
				@include breakpoint-1199{
					font-size: 22px;
				}
				a{
					color: $clr-white;
				}
				
			}
		}
		a{
			img{
				height: 420px;
				width: 100%;
				object-fit: cover;
				object-position: center;
				@include breakpoint-1199{
					height: 320px;
				}
			}
		}
	}
	.trv-content{
		background-color: $clr-white;
		padding: 30px;
		border-radius: 0px 0px 30px 30px;
		box-shadow: 0px 18px 18px rgba(0, 106, 114, 0.15);
		.trv-content-head-section{
			margin-bottom: 30px;
			display: flex;
			@include breakpoint-1199{
				display: block;
			}
			.trv-tour-price{
				width: 90px;
				@include breakpoint-1199{
					width:100%;
					margin-bottom: 10px;
					display: flex;
        			align-items: baseline;
				}
				.price{
					color: $clr-yellow;
					font-size: 28px;
					line-height: 1.3;
					font-weight: 900;
					display: block;
					@include breakpoint-1199{
						padding-right: 10px;
					}
				}
				.price-duration{
					font-size: 16px;
					display: block;
				}
			}
			.trv-tour-info{
				width: calc(100% - 90px);
				font-size: 20px;
				line-height: 1.3;
				font-family: $heading-font;
				font-weight: 500;
				@include breakpoint-1199{
					width:100%;
				}
				a{
					color: $clr-primary;
					transition: $transition;
					&:hover{
						color: $clr-yellow;
					}
				}
				
			}
		}
		.trv-content-bottom-section{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
}
.trv-review-rating{
	i{
		color: $clr-yellow;
	}
}

/** - Explore popular tour style 2 Start */
.trv-popular-tours2{
	background-color: $bgcolor1;
	margin: 0px 60px;
	padding-bottom: 106px;
	@include breakpoint-1366{
		margin: 0px 24px;
	}
	@include breakpoint-1024{
		padding-bottom: 36px !important;
	}
	@include breakpoint-480{
		margin: 0px;
	}
}

.trv-popular-tour-st2{
	overflow: hidden;
	position: relative;
	.trv-media{
		position: relative;
		overflow: hidden;
		border-radius: 30px;
		
		.trv-tour-title{
			position: absolute;
			bottom: 0px;
			left: 0px;
			right: 0px;
			padding: 15px 30px;
			background: #0661684f;
			backdrop-filter: blur(7px);
			transition: $transition;
			.trv-title{
				margin-bottom: 0px;
				font-size: 28px;
				font-weight: 500;
				@include breakpoint-768{
					font-size: 22px;
				}
				a{
					color: $clr-white;
					
				}
				
			}
		}
		a{
			img{
				height: 420px;
				width: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
	}
	.trv-content{
		transition: $transition;
		opacity: 0;
		transform: translateY(30px) scale(0.90);
		position: absolute;
		top: 20px;
		left: 20px;
		right: 20px;
		bottom: 20px;
		padding: 30px;
		border-radius: 20px;
		box-shadow: 0px 18px 18px rgba(0, 106, 114, 0.15);
		background: rgba(6, 97, 104, 0.68);
		backdrop-filter: blur(5px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		@include breakpoint-480{
			top:10px;
			left:10px;
			right:10px;
			bottom:10px;
		}

		.trv-content-head-section{
			margin-bottom: 30px;
			display: flex;
			justify-content: space-between;
			@include breakpoint-480{
				display: block;
			}
			.trv-tour-duration{
				height: 40px;
				padding: 10px 20px;
				background-color: $clr-primary;
				color: $clr-white;
				font-weight: 600;
				font-size: 14px;
				border-radius: 0px 50px 50px 0px;
				display: flex;
				margin-left: -30px;
				align-items: center;
				i{
					font-size: 20px;
					margin-right: 10px;
				}
			span{display: block;}
			}
			.trv-tour-price{
				width: 90px;
				text-align: right;
				@include breakpoint-480{
					text-align: left;
				}
				.price{
					color: $clr-white;
					font-size: 34px;
					line-height: 1.3;
					font-weight: 900;
					display: block;
				}
				.price-duration{
					font-size: 16px;
					display: block;
					color: $clr-white;
				}
			}
		}
		.trv-content-bottom-section{
			.trv-tour-title2{
				margin-bottom: 20px;
				.trv-title2{
					margin-bottom: 0px;
					font-size: 28px;
					font-weight: 500;
					color: $clr-white;
					@include breakpoint-768{
						font-size: 22px;
					}
					a{
						color: $clr-white;
						transition: $transition;
						&:hover{
							color: $clr-yellow;
						}
					}
					
				}
			}
			.trv-content-bottom-column{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
			}
			
		}
	}
	.trv-tour-review-count{
		color: $clr-white;
	}

	&:hover{
		.trv-media{
			.trv-tour-title{
				opacity: 0;
			}
		}
		.trv-content{
			opacity:1;
			transform: translateY(0px) scale(1);
		}
	}
}

/** - Explore popular tour style 2 End */
.trv-popular-tours3{
	background-color: $clr-primary;
	padding-bottom: 106px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	@include breakpoint-1024{
		padding-top: 50px;
		padding-bottom: 30px;
	}
	&:before{
		background-color: $bgcolor2;
		content: '';
		width: 100%;
		left: 0px;
		top: 0px;
		position: absolute;
		height: 572px;
		z-index: -1;
		@include breakpoint-1024{
			height: 501px;
		}
		@include breakpoint-768{
			height: 483px;
		}
		@include breakpoint-575{
			height: 453px;
		}
	}
}

.trv-popular-tour-st3{
	position: relative;
	.trv-media{
		position: relative;
		overflow: hidden;
		border-radius: 30px 30px 0px 0px;
		a{
			img{
				height: 260px;
				width: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
	}
	.trv-content{
		transition: $transition;
		padding: 20px;
		border-radius: 0px 0px 30px 30px;
		background-color: $clr-white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-shadow: 0px 18px 18px rgba(0, 106, 114, 0.15);
		.trv-title{
			margin-bottom: 10px;
			font-size: 20px;
			font-weight: 500;
			a{
				color: $clr-primary;
				transition: $transition;
				&:hover{
					color: $clr-yellow;	
				}
			}
		}

		.trv-content-head-section{
			margin-bottom: 30px;
			display: flex;
			justify-content: space-between;
			@include breakpoint-360{
				margin-bottom: 10px;
			}
			.trv-tour-rating{
				display: flex;
				align-items: center;
				.trv-tour-review-count{
					margin-right: 10px;
					@include breakpoint-360{
						margin-right: 2px;
					}
				}
			}
			.trv-tour-duration{
				color: $clr-primary;
				font-weight: 600;
				font-size: 14px;
				display: flex;
				align-items: center;
				i{
					font-size: 20px;
					margin-right: 10px;
					@include breakpoint-360{
						margin-right: 4px;
					}
				}
				span{display: block;}
			}
			
		}

		.trv-tour-price{
			display: flex;
			align-items: center;
			@include breakpoint-360{
				margin-bottom: 6px;
			}
			.price{
				color: $clr-yellow;
				font-size: 28px;
				line-height: 1.3;
				font-weight: 900;
				display: block;
				margin-right: 10px;
			}
			.price-duration{
				font-size: 16px;
				display: block;
				color: $clr-primary;
				font-family: $heading-font;
			}
		}
		.trv-content-bottom-section{
			display: flex;
			justify-content: space-between;
			@include breakpoint-360{
				flex-direction: column-reverse;
			}
		}
	}
	.trv-tour-review-count{
		color: $clr-primary
	}

}

/** - Tour List Style */
.trv-popular-tour-list-style1{
	display: flex;
	@include breakpoint-767{
		display: block;
	}	
	.trv-media{
		position: relative;
		overflow: hidden;
		border-radius: 30px 0px 0px 30px;
		min-width: 350px;
		width: 350px;
		@include breakpoint-1024{
			min-width: 280px;
			width: 280px;	
		}
		@include breakpoint-767{
			min-width: 100%;
			width: 100%;
			border-radius: 30px 30px 0px 0px;
		}
		a{
			img{
				height: 370px;
				width: 100%;
				object-fit: cover;
				object-position: center;
				@include breakpoint-480{
					height: 260px;
				}	
			}
		}
	}
	.trv-tour-duration{
		margin-left: -30px;
		padding: 10px 20px;
		background-color: $clr-primary;
		color: $clr-white;
		font-weight: 600;
		font-size: 14px;
		border-radius: 0px 50px 50px 0px;
		display: flex;
		align-items: center;
		height: 46px;
		i{
			font-size: 20px;
			margin-right: 10px;
		}
		span{display: block; white-space: nowrap;}
	}
	
	.trv-title{
		margin-bottom: 20px;
		font-size: 28px;
		font-weight: 500;
		@include breakpoint-575{
			margin-bottom: 10px;
			font-size: 24px;
		}
		a{
			color: $clr-primary;
			transition: $transition;
			&:hover{
				color: $clr-yellow;	
			}
		}
	}
	
	.trv-content{
		position: relative;
		background-color: $clr-white;
		padding: 30px;
		border-radius: 0px 30px 30px 0px;
		box-shadow: 0px 18px 18px rgba(0, 106, 114, 0.15);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		@include breakpoint-767{
			border-radius: 0px 0px 30px 30px;
			justify-content: flex-start
		}
		.trv-content-head-section{
			margin-bottom: 0px;
			display: flex;
			justify-content: space-between;
			.trv-tour-price{
				width: 90px;
				text-align: right;
				.price{
					color: $clr-yellow;
					font-size: 28px;
					line-height: 1.3;
					font-weight: 900;
					display: block;
				}
				.price-duration{
					font-size: 14px;
					display: block;
				}
			}
		}
		.trv-content-mid-section{
			@include breakpoint-767{
				margin-bottom: 20px;
			}	
		}
		.trv-content-bottom-section{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	p{
		font-family:$heading-font;
		font-weight: 500;
		font-size: 20px;
		line-height: 1.2;
		color:$clr-primary;
		margin-bottom: 0px;
		@include breakpoint-575{
			font-size: 18px;
		}
	}
}
/** - Tv adventure style 1 start */

.trv-adventure-st1{
	padding: 120px 0px;
	background-size: cover;
	position: relative;
	text-align: center;
	overflow: hidden;
	@include breakpoint-480{
		padding: 10px 0px 40px 0px;
	}
	.circle-text2{
		border-radius: 50%;
  		display: inline-block;
		margin-bottom: 0px;
		.emblem-wrap{
			background-color: $clr-primary;
			border-radius: 50%;
			width: 220px;
			height: 220px;
			display: flex;
			align-items: center;
			justify-content: center;
			@include breakpoint-480{
				width: 190px;
				height: 190px;
			}
			i{
				margin: 0 auto;
				width: 124px;
				height: 124px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background-color: #0A747C;
				img{
					border-style: none;
					height: auto;
					max-width: 74px;
				}
			}
			.emblem{
				font-family: $font-style2;
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 10px;
				text-transform: uppercase;
				margin: 0 auto;
				width: 200px;
				height: 200px;
				border-radius: 50%;
				color: #fff;
				animation: spinZ 20s linear infinite;
				text-align: center;
				background-color: transparent;
				@include breakpoint-480{
					width: 180px;
					height: 180px;
				}
			}
		}
	}
	.adventure-title{
		font-family: $font-style3;
		font-size: 200px;
		padding: 0px 30px;
		font-weight: 400;
		color: $clr-white;
		text-shadow: 2px 5px 0px rgba(255, 255, 255, 0.72);
		line-height: 1;
		margin-bottom: 0px;
		@include breakpoint-1200{
			margin-top: 30px;
			font-size: 120px;
			text-shadow: 2px 3px 0px rgba(255, 255, 255, 0.72);
		}
		@include breakpoint-768{
			font-size: 80px;
			text-shadow: 2px 0px 0px rgba(255, 255, 255, 0.72);
		}
		@include breakpoint-480{
			font-size: 40px;
			text-shadow: none;
		}
	}
	.adventure-text{
		font-family: $heading-font;
		text-transform: uppercase;
		font-size: 50px;
		line-height: 1.2;
		font-weight: 400;
		color: $clr-white;
		margin-bottom: 30px;
		@include breakpoint-1200{
			font-size: 30px;
		}
		@include breakpoint-480{
			font-size: 22px;
			margin-bottom: 10px;
			margin-top: 10px;
		}
		
	}
}

/** - All blog section start */
.trv-blog-all-style{
	background-color: $bgcolor2;
	@include breakpoint-1024{
		padding-top: 50px;
		padding-bottom: 30px;
	}
}
.trv-blog-st1{
	position: relative;
	display: flex;
	margin-bottom: 30px;
	.trv-post-media{
		margin-right: 10px;
		position: relative;
		z-index: 1;
		border-radius: 15px;
		overflow: hidden;
		min-width: 100px;
		width: 100px;
		height: 131px;
		@include breakpoint-400{
			min-width: 80px;
			width: 80px;
			height: 104px;
		}
		img{
			width: 100%;
			height: 100%;
		}
	}
		
	.post-date{
		font-family: $heading-font;
		width: 40px;
		height: 40px;
		color: $clr-white;
		font-size: 14px;
		line-height: 1;
		background-color: $clr-primary;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		position: absolute;
		right: 10px;
		top: 10px;
		span{
			display: block;
			font-size: 20px;
			line-height: 1;
			font-weight: 700;
			color: $clr-white;
			font-family: $font-style2;
		}
	}

	.trv-post-info{
		background-color: $clr-white;
		padding: 25px 20px;
		border-radius: 15px;
		.post-category{
			font-size: 18px;
			font-weight: 500;
			color:$clr-yellow;
			white-space: nowrap;
			display: table;
			font-family: $heading-font;
			line-height: 1;
			padding-bottom: 15px;
		}
		.trv-post-title{
			.post-title{
				margin-bottom: 0px;
				a{
					transition: $transition;
					font-size: 20px;
					font-family: $heading-font;
					font-weight: 500;
					color: $clr-primary;
					display: block;
					&:hover{
						color: $clr-yellow;
					}
				}
			}
		}
	}
}

.trv-blog-st2{
	position: relative;
	margin-bottom: 30px;
	.trv-post-media{
		position: relative;
		z-index: 1;
		border-radius: 20px;
		overflow: hidden;
		img{
			width: 100%;
			object-fit: cover;
			object-position: center;
			height: 210px;
			@include breakpoint-768{
				height:340px;
			}
		}
	}
		
	.post-date{
		font-family: $heading-font;
		width: 40px;
		height: 40px;
		color: $clr-primary;
		font-size: 14px;
		line-height: 1;
		background-color: $bgcolor2;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		position: absolute;
		right: 10px;
		top: 10px;
		z-index: 1;
		span{
			display: block;
			font-size: 20px;
			line-height: 1;
			font-weight: 700;
			color: $clr-primary;
			font-family: $font-style2;
		}
	}

	.trv-post-info{
		background-color: $clr-white;
		padding: 25px 20px;
		border-radius: 15px;
		margin: -50px 20px 0px 20px;
		position: relative;
		z-index: 1;
		.post-category{
			font-size: 18px;
			font-weight: 500;
			color:$clr-yellow;
			white-space: nowrap;
			display: table;
			font-family: $heading-font;
			line-height: 1;
			padding-bottom: 15px;
		}
		.trv-post-title{
			.post-title{
				margin-bottom: 0px;
				a{
					transition: $transition;
					font-size: 20px;
					font-family: $heading-font;
					font-weight: 500;
					color: $clr-primary;
					display: block;
					&:hover{
						color: $clr-yellow;
					}
				}
			}
		}
	}
}

.trv-blog-style3-section{
	background-color: $clr-primary;
}
.trv-blog-st3{
	position: relative;
	margin-bottom: 30px;
	.trv-post-media{
		position: relative;
		z-index: 1;
		border-radius: 20px;
		overflow: hidden;
		img{
			width: 100%;
			object-fit: cover;
			object-position: center;
			height:453px;
			@include breakpoint-1199{
				height: 390px;
			}
			@include breakpoint-768{
				height:340px;
			}
		}
	}
		
	.post-date{
		font-family: $heading-font;
		width: 80px;
		height: 80px;
		color: $clr-primary;
		font-size: 16px;
		line-height: 1;
		background-color: $bgcolor2;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		position: absolute;
		text-transform: uppercase;
		right: 10px;
		top: 10px;
		z-index: 1;
		span{
			display: block;
			font-size: 36px;
			line-height: 1;
			font-weight: 800;
			color: $clr-primary;
			font-family: $font-style2;
		}
	}

	.trv-post-info{
		padding: 60px 30px 30px;
		border-radius: 15px;
		position: absolute;
		z-index: 1;
		bottom: 0px;
		left: 0px;
		width: 100%;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.76) 73%);
		.post-category{
			font-size: 18px;
			font-weight: 500;
			color:$clr-yellow;
			white-space: nowrap;
			display: table;
			font-family: $heading-font;
			line-height: 1;
			padding-bottom: 15px;
		}
		.trv-post-title{
			.post-title{
				margin-bottom: 0px;
				a{
					transition: $transition;
					font-size: 28px;
					font-family: $heading-font;
					font-weight: 500;
					color: $clr-white;
					display: block;
					&:hover{
						color: $clr-yellow;
					}
					@include breakpoint-768{
						font-size: 22px;
					}
				}
			}
		}
	}
}

/** - Banner Style 1 */
.trv-banner-1-wrap{
	height: 950px;
	overflow: hidden;
	position: relative;
	@include breakpoint-1600{
		height: 900px;
	}
	@include breakpoint-1366{
		height: 768px;
	}
	@include breakpoint-575{
		height: 680px;
	}
	.trv-vid-full{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		max-width: auto;
		object-fit: cover;
		width: 100%;
		height: 100%;
		margin: 0;
		z-index: 0;
	}
	.trv-banner-1-overlay{
		background-color: rgba(0,0,0,0.35);
		border-radius: 30px;
		margin: 35px;
		height: 880px;
		position: relative;
		z-index: 2;
		@include breakpoint-1600{
			height: 830px;
		}
		@include breakpoint-1366{
			height: 685px;
		}
		@include breakpoint-991{
			height: 770px;
			margin: 0px;
			border-radius: 0px;
		}
		@include breakpoint-575{
			height: 680px;
		}
		.trv-banner-1-social{
			color: $clr-white;
			position: absolute;
			bottom: 30px;
			right: 450px;
			display: flex;
			align-items: center;
			z-index: 4;
			@include breakpoint-1600{
				right: 240px;	
			}
			@include breakpoint-1366{
				left: 570px;
        		right: auto;
			}
			@include breakpoint-1366{
				left: auto;
        		right: 0px
			}
			span{
				padding-right: 105px;
				font-size: 12px;
				line-height: 18px;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				position: relative;
				display: inline-block;
				@include breakpoint-767{
					display: none;
				}
				&:after{
					position: absolute;
					width: 64px;
					height: 1px;
					background-color: $clr-white;
					content: '';
					right: 20px;
					top: 50%;
					transform: translateY(-50%);
				}

			}
			ul{
				margin: 0px;
				list-style: none;
				display: flex;
				li{
					a{
						color: $clr-white;
						font-size: 20px;
						margin-right: 20px;
						transition: $transition;
						display: block;
						&:hover{
							color: $clr-green;
							transform:translateY(-5px);
						}
					}
				}
			}
		}
	}
	.trv-banner-1-text{
		padding-top: 200px;
		padding-left: 70px;
		max-width: 1020px;
		@include breakpoint-1366{
			padding-top: 150px;
		}
		@include breakpoint-640{
			padding: 150px 20px 0px 20px;
		}
		.trv-banner-rock-pic{
			position: absolute;
			bottom: -35px;
			left: 100px;
			@include breakpoint-1366{
				position: absolute;
				bottom: -50px;
				left: 100px;
				max-width: 460px;
			}
			@include breakpoint-1024{
				left: 50px;
				max-width: 300px;
				bottom: 0px;
			}
			@include breakpoint-640{
				display: none;
			}
		}

		.trv-banner-1-text-mid{position: relative;}
		.trv-banner-1-text-small{
			font-family: $font-style3;
			font-size: 48px;
			line-height: 70px;
    		color: #7FC7CE;
			padding-left: 50px;
			display: block;
			@include breakpoint-1366{
				font-size: 30px;
			}
			@include breakpoint-1024{
				padding-left: 0px;
			}
		}
		.trv-btrfly{
			position: absolute;
			position: absolute;
			top: 15px;
			z-index: 9;
			right: -95px;
			width: 200px;
			@include breakpoint-1366{
				width: 150px;
			}
			@include breakpoint-1024{
				top: -15px;
			}
			@include breakpoint-575{
				width: 100px;
			}
		}
		.trv-banner-1-text-large{
			font-family: $font-style3;
			font-size: 250px;
			color: $clr-white;
			margin-bottom: 0px;
			position: relative;
			display: inline-block;
			animation: slide-left 5s linear infinite alternate-reverse both;
			@include breakpoint-1366{
				font-size: 190px;	
			}
			@include breakpoint-1024{
				font-size: 130px;	
			}
			@include breakpoint-640{
				font-size: 80px;	
			}
		}

		.trv-banner-1-text-large-outline{
			font-family: $font-style3;
			font-size: 250px;
			color: transparent;
			position: absolute;
			left: 0px;
			top: 0;
			z-index: 1;
			-webkit-text-stroke: 2px $clr-white;
			text-stroke: 2px $clr-white;
			animation: slide-left 5s linear infinite alternate-reverse both;
			@include breakpoint-1366{
				font-size: 190px;	
			}
			@include breakpoint-1024{
				display: none;
			}
		
		}
		.trv-banner-text-detail{
			font-size: 18px;
			line-height: 30px;
			color: $clr-white;
			position: relative;
			margin-left: 700px;
			max-width: 230px;
			width: 100%;
			margin-bottom: 30px;
			@include breakpoint-1366{
				margin-left: 500px;	
			}
			@include breakpoint-1024{
			    margin-left: 0px;
        		max-width: inherit;
			}
			
		}
		.trv-banner-btn{
			margin-left: 750px;
			position: relative;
			z-index: 4;
			@include breakpoint-1366{
				margin-left: 500px;	
			}
			@include breakpoint-1024{
				margin-left: 0px;	
			}
		}
		
	}

	.trv-cloud-1{
		position: absolute; 
		top: 150px; 
		width: 100%;
		img{
			width: auto;
			@include breakpoint-1024{
				width: 120px;
			}
		}
	}
	.trv-cloud-2{
		position: absolute; 
		top: 0px;
		width: 100%;
		img{
			width: auto;
			@include breakpoint-1024{
				width: 120px;
			}
		}
	}
	.twm-img-bg-circle-area{
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		overflow: hidden;
		z-index: 3;
		@include breakpoint-1024{
			display: none;
		}
		.twm-img-bg-circle1-wrap{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 700px;
			height: 700px;
			right: 0px;
		}
		.twm-img-bg-circle2-wrap{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 900px;
			height: 900px;
			right: 0px;
		}
		.twm-img-bg-circle3-wrap{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 1100px;
			height: 1100px;
			right: 0px;
		}
		.twm-img-bg-circle1{
			right: -80%;
			position: absolute;
			z-index: 2;
			animation: rotate-center 10s linear infinite both;
			span{
				width: 700px;
				height: 700px;
				border-radius: 50%;
				border: 1px solid rgba(255,255,255,0.3);
				display: block;
				position: relative;
				&:after{
					width: 14px;
					height: 14px;
					background-color: $clr-white;
					border-radius: 50%;
					content: '';
					position: absolute;
					right: 35px;
					top: 25%;
					z-index: 9;
				}
				
			}
		}
		.twm-img-bg-circle2{
			right: -70%;
			position: absolute;
			z-index: 2;
			animation: rotate-center 10s linear infinite reverse both;
			span{
				width: 900px;
				height: 900px;
				border-radius: 50%;
				border: 1px solid rgba(255,255,255,0.3);
				display: block;
				&:after{
					width: 14px;
					height: 14px;
					background-color: $clr-green;
					border-radius: 50%;
					content: '';
					position: absolute;
					right: 75px;
					bottom: 21%;
					z-index: 9;
				}
			}
		}
		.twm-img-bg-circle3{
			right: -60%;
			position: absolute;
			z-index: 2;
			animation: rotate-center 10s linear infinite both;
			span{
				width: 1100px;
				height: 1100px;
				border-radius: 50%;
				border: 1px solid rgba(255,255,255,0.3);
				display: block;
				&:before{
					width: 14px;
					height: 14px;
					background-color: $clr-yellow;
					border-radius: 50%;
					content: '';
					position: absolute;
					left: 3px;
					top:40%;
					z-index: 9;
				}
			}
		}
	}
}
.tvr-banner-1-bottom-left{
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 9;
	.media{
		max-width: 330px;
		 animation: rotate-90-br-cw 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
		 @include breakpoint-1024{
			max-width: 230px;
		}
		.lizard{
			width: 100%;
		}
		.lizard-eye{
			position: absolute;
			bottom: 70%;
			left: 24%;
			width: 40px;
			@include breakpoint-1024{
				width: 24px;
			}
		}
	}
	
}

.trv-banner-1-rain-effect{
	
	.rain {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
	.rain.back-row {
		display: none;
		z-index: 1;
		bottom: 60px;
		opacity: 0.5;
	}

	.drop {
		position: absolute;
		bottom: 100%;
		width: 15px;
		height: 120px;
		pointer-events: none;
		animation: drop 2s linear infinite;
	}

	@keyframes drop {
		0% {
			transform: translateY(0vh);
		}
		75% {
			transform: translateY(90vh);
		}
		100% {
			transform: translateY(90vh);
		}
	}

	.stem {
		width: 6px;
		height: 60%;
		border-radius: 0px 0px 20px 20px;
		margin-left: 7px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
		animation: stem 0.5s linear infinite;
	}

	@keyframes stem {
		0% {
			opacity: 1;
		}
		65% {
			opacity: 1;
		}
		75% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}

}

.rotate-center-reverse {
	animation: rotate-center 30s linear infinite reverse both;
}

@keyframes rotate-center-reverse {
	0% {
	  transform: rotate(0);
	}
	100% {
	  transform: rotate(360deg);
	}
}


.rotate-90-br-cw {
	-webkit-animation: rotate-90-br-cw 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
	    animation: rotate-90-br-cw 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
}

@keyframes rotate-90-br-cw {
   0% {
	-webkit-transform: skewY(0deg);
            transform: skewY(0deg);
	-webkit-transform-origin: 0px 0px;
            transform-origin: 0px 0px;
  }
  50% {
	-webkit-transform: skewY(1deg);
            transform: skewY(1deg);
	-webkit-transform-origin: 0px 0px;
            transform-origin: 0px 0px;
  }
  100% {
	-webkit-transform: skewY(0deg);
            transform: skewY(0deg);
	-webkit-transform-origin: 0px 0px;
            transform-origin: 0px 0px;
  }
}
 

/** - 3 STEP SECTION START */
.trv-3step-section{
	background-color: $clr-white;
	padding-top: 120px;
	position: relative;
	overflow: hidden;
	@include breakpoint-1024{
		padding-top: 50px;
	}
	.trv-3step-section-left{
		.trv-head-title-wrap{
			max-width: 400px;
			@include breakpoint-767{
				max-width: inherit;
			}
		}
	}
	.trv-3step-section-row{
		position: relative;
		z-index: 1;
		margin-bottom: 120px;
		@include breakpoint-1024{
			margin-bottom: 50px;
		}
	}
	.trv-yl-shedow-left{
		position: absolute;
		width: 600px;
		height: 550px;
		left:-300px;
		top:50%;
		background: rgba(255, 170, 13, 0.1);
		filter: blur(100px);
	}
    .trv-yl-shedow-right{
		position: absolute;
		width: 600px;
		height: 500px;
		right: -300px;
		top: 50%;
		background: rgba(41, 137, 145, 0.1);
		filter: blur(100px);
	}
    .trv-bl-shedow-top{
		position: absolute;
		width: 600px;
		height: 550px;
		left:50%;
		transform: translateX(-50%);
		top:-200px;
		background: rgba(255, 170, 13, 0.1);
		filter: blur(100px);

	}
}
.trv-for-summer-section{
	position: relative;
	z-index: 1;
	padding-top: 90px;
	@include breakpoint-1199{
		max-width: 540px;
		margin: 30px auto 0px;
	}
	&:after{
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50% , -50%);
		width: 500px;
		height: 500px;
		border-radius: 50%;
		background-color: $clr-light-yellow;
		z-index: -1;
	}
	.media-girl{margin-right: 80px;position: relative; z-index: 5;}
	.media-left-ballon{width: 68px; position: absolute; left: 0px; bottom: 165px;animation: slide-top2 20s linear infinite alternate-reverse;}
	.media-right-ballon{width: 128px; position: absolute; right: 60px; top: 10px; z-index: 1;}
	.media-cloud1{position: absolute; left: 40px; top: 100px; z-index: 2; width: 40%; left: -30px; top: 160px;
	animation: smooth-up-down 10s linear infinite alternate-reverse both;}
	.media-cloud2{position: absolute; right: 0px; top: 40px;z-index: 3;
	animation: smooth-up-down 5s linear infinite alternate-reverse both;}

	.trv-for-summer-text-wrap{
		position: absolute;
		right: 0px;
		bottom: 0px;
		width: 90px;
		@include breakpoint-575{
			position: inherit;
		}
		span{
			color: $clr-primary;
			font-family: $font-style3;
			font-size: 40px;
			display: flex;
			align-items: baseline;
			position: absolute;
			left: 0%;
			text-align: left;
			transform: rotate(-90deg);
			transform-origin: 0 0;
			padding-left: 50px;
			@include breakpoint-575{
				position: inherit;
				transform: none;
				font-size: 20px;
				padding-right: 10px;
			}
			b{
				color: $clr-yellow;
				font-size: 98px;
				font-weight: 400;
				line-height: 1;
				@include breakpoint-575{
					font-size: 38px;
				}
			}
		}
	}
}
.trv-3step-section-l-mid{
	display: flex;
	@include breakpoint-767{
		display: block;
	}
}

.trv-offer-st1{
	margin-right: 24px;
	min-width: 246px;
	@include breakpoint-767{
		margin-right: 0px;
		min-width: inherit;
	}
	.media{
		img{
			width: 236px;
			height: 266px;
			border-radius: 20px;
			object-fit: cover;
			object-position: center;
			@include breakpoint-767{
				width: calc(100% - 12px)
			}
		}
	}
	.info{
		border-radius: 20px;
		max-width: 236px;
		padding: 60px 20px 20px 20px;
		background-color: $clr-yellow;
		margin-left: 12px;
		margin-top: -44px;
		@include breakpoint-767{
			margin-bottom: 30px;
			max-width: inherit;
			text-align: center;
		}
		.sm-title{
			color: $clr-primary;
			font-weight: 600;
			font-size: 18px;
			line-height: 24px;
			display: block;
			padding-bottom: 10px;
		}

		.ofr-price{
			display: flex;
			@include breakpoint-767{
				justify-content:center;
			}
		}
		.lg-title{
			font-style: normal;
			font-weight: 900;
			font-size: 95px;
			line-height: 0.75;
			color: $clr-white;
			font-family: $font-style2;
			margin-bottom: 0px;
			@include breakpoint-767{
				font-size: 65px;
			}
		}
		.per-off{
			display: block;
			font-style: normal;
			font-weight: 900;
			font-size: 20px;
			line-height: 24px;
			color: $clr-primary;
			text-transform: uppercase;
			span{
				display: block;
			}
		}
	}
}

.trv-whychoose{
	overflow: hidden;
	border-radius:0px 0px 100px 100px;
	background-color: $clr-primary;
	padding: 110px 0px 70px 0px;
	background-image: url(../images/w-cho-top.png) , url(../images/w-cho-btm.png);
	background-repeat: no-repeat;
	background-position: top left, bottom left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	@include breakpoint-991{
		display: block;
		padding: 110px 50px 70px 50px;
	}
	@include breakpoint-767{
		background-image:url(../images/w-cho-btm.png);
		background-position: bottom left;
		padding: 50px 50px 70px 50px;
		border-radius:50px;
		position: relative;
		background-size: 160%;
	}
	@include breakpoint-420{
		padding: 50px 20px 50px 20px;
	}
	
	.w-choo-left{
		max-width: 490px;
		margin-left: 180px;
		@include breakpoint-1199{
			margin-left: 40px;
		}
		@include breakpoint-991{
			margin-left: 0px;
		}
		@include breakpoint-767{
			margin-bottom: 30px;
		}
		.w-title{
			font-family: $font-style3;
			font-size: 40px;
			margin-bottom: 30px;
			color: $clr-white;
			@include breakpoint-768{
				font-size: 30px;
			}
		}
		.trv-cloumn-list{
			margin-bottom: 15px;
		}
	}
	.w-choo-right{
		margin-right: 160px;
		margin-left: auto;
		@include breakpoint-991{
			margin-right: 0px;
		}
		.media{
			margin-bottom: 10px;
		}
		@include breakpoint-991{
			text-align: center;
		}
		.info{
			
			.call-us{
				font-weight: 900;
				font-size: 58px;
				line-height: 0.75;
				margin-bottom: 10px;
				text-transform: uppercase;
     			color: $clr-white;
				font-family: $font-style2;
				@include breakpoint-1199{
					font-size: 40px;
				}
			}
			.num{
				display: block;
				font-weight: 700;
				font-size: 38px;
				line-height:1.2;
				text-transform: uppercase;
				color: $clr-green;
				@include breakpoint-1199{
					font-size: 28px;
				}
			}
		}
	}
}
.trv-cloumn-list{
	ul{
		margin-bottom: 0px;
		display: flex;
		color: $clr-white;
		flex-wrap: wrap;
		list-style: none;
		@include breakpoint-767{
			display: block;
		}
		li{
			font-family: $heading-font;
			font-style: normal;
			font-weight: 500;
			font-size: 18px;
			line-height: 24px;
			color:$clr-white;
			width: 50%;
			padding-right: 10px;
			display: flex;
			margin-bottom: 20px;
			@include breakpoint-767{
				width: 100%;
			}
			i{
				width: 30px;
				height: 30px;
				min-width: 30px;
				margin-right: 28px;
				border-radius: 50%;
				background-color: $clr-yellow;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $clr-white;

			}
		}
	}
}


.smooth-up-down {
	-webkit-animation: smooth-up-down 20s linear infinite alternate-reverse both;
	        animation: smooth-up-down 20s linear infinite alternate-reverse both;
}
@-webkit-keyframes smooth-up-down {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}
@keyframes smooth-up-down {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}

/** - Tour Category SLIDER */
.trv-tour-category-section{
	height: 906px;
	padding: 120px 0px 0px 0px;
	position: relative;
	background-size: cover;
	@include breakpoint-1024{
		height: auto;
	}
	&:after{
		content: '';
		bottom: 0px;
		left: 0px;
		right: 0px;
		height: 255px;
		position: absolute;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.56) 0%, rgba(255, 255, 255, 0) 90%);
	}
	#module {
		display: flex;
		align-items: center;
		margin: 0 auto;
		width: 100%;
		max-width: 1480px;
		height: 560px;
		margin-bottom: 65px;
		padding: 0px 30px;
		@include breakpoint-1024{
			height: 420px;
		}
		@include breakpoint-991{
			display: block;
			height: auto;
			margin-bottom: 0px;
		}
		@include breakpoint-640{
			margin-bottom: 30px;
		}
		.trv-feature{
			display: flex;
			justify-content: center;
			align-items: start;
			flex-direction: column;
			flex: 1;
			max-width: 370px;
			margin-right: 120px;
			@include breakpoint-1200{
				margin-right: 20px;
			}
			@include breakpoint-991{
				margin: 0px auto 30px;
    			text-align: center;
				min-height: 250px;
			}
			
			h2 {
				max-width: 100%;
				position: relative;
				opacity: 0;
				font-family: $heading-font;
				color: $clr-primary;
				font-size: 46px;
				font-weight: 700;
				margin-bottom: 14px;
				@include breakpoint-991{
					margin: 0px auto 15px;
				}
				@include breakpoint-768{
					font-size: 30px;
				}
			}
			p {
				font-size: 16px;
				position: relative;
				opacity: 0;
				margin-bottom: 45px;
				@include breakpoint-991{
					margin-bottom: 20px;
				}
			}
		}
		.swiper {
			flex: 2;
			padding-left: 30px;
			@include breakpoint-540{
				padding-left: 0px;
			}
		}
	}
	
	.trv-tr-cat-carousal-media{
		border-radius: 30px;
		padding: 15px;
		background-color: $clr-white;
		overflow: hidden;
		img{
			border-radius: 20px;
			width: 100%;
			height: 450px;
			object-fit: cover;
			object-position: center;
		}
		.trv-bx-title{
			font-size: 28px;
			font-weight: 500;
			margin-top: 10px;
			margin-bottom: 0px;
			@include breakpoint-768{
				font-size: 22px;
			}
			a{
				transition: $transition;
				color: $clr-primary;
				&:hover{
					color: $clr-yellow;
				}
			}
		}
	}

	.swiper-slide {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		rotate: 3deg;
		scale: 0.8;
		transition: all 500ms ease;
		position: relative;
		overflow: hidden;
		&.swiper-slide-active {
			rotate: 0deg;
			scale: 1;
			&:before{
				content: "";
				position: absolute;
				top:-25%;
				left: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 150%;
				background: $clr-white;
				background: linear-gradient(
					90deg,
					rgba(255, 255, 255, 0) 10%,
					rgb(255, 255, 255) 50%,
					rgba(255, 255, 255, 0) 90%
				);
				animation: shine 1s 150ms forwards;
				rotate: -45deg;
				opacity: 0;
			}
		}
		&.swiper-slide-last {
			rotate: 0deg;
			position: relative;
			height: 400px;
			@include breakpoint-640{
				height: auto;
			}
			a{
				position: absolute;
				top: 50%;	
			}
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
			-o-object-fit: contain;
			object-fit: contain;
		}

	}
	
	.animate-title {
	animation: text-fade-up 1s forwards ease;
	}

	.animate-description {
	animation: text-fade-up 1s 0.2s forwards ease;
	}

	.animate-url {
		animation: text-fade-up 1s forwards ease;
	}

	.animate-away {
	animation: text-fade-away 300ms forwards ease;
	}

	.swiper-button-prev{
		margin-left: 10px;
		@include breakpoint-991{
			margin-left: 0px;
		}
		@include breakpoint-540{
			margin-left: 10px;
		}
	}
	@include breakpoint-991{
		.site-button{margin: 0px auto;}
	}
	

}

@keyframes text-fade-up {
  from {
    opacity: 0;
    top: -0.5rem;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
@keyframes text-fade-away {
  from {
    opacity: 1;
    top: 0;
  }
  to {
    opacity: 0;
    top: 0;
  }
}
@keyframes shine {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(100%);
    opacity: 0.7;
  }
}

@media (width < 992px) {
  #module {
    flex-direction: column;
  }
  #module .swiper {
    flex: 1;
  }
}


.trv-btm-title-section{
	position: relative;
	text-align: right;
	z-index: 1;
	span{
		color: $clr-white;
		font-family:$heading-font;
		font-style: normal;
		font-weight: 700;
		font-size: 28px;
		@include breakpoint-768{
			font-weight: 500;
			font-size: 20px;
		}
	}
	.trv-btm-title-large{
		font-family: $font-style2;
		font-weight: 900;
		font-size: 80px;
		line-height:1;
		text-transform: uppercase;
		color: $clr-yellow;
		margin-bottom: 0px;
		@include breakpoint-991{
			font-size: 46px;
		}
		@include breakpoint-768{
			font-size: 30px;
		}
	}
}

.trv-btm-title2-section{
	position: relative;
	text-align: right;
	z-index: 1;
	span{
		color: $clr-primary;
		font-family:$heading-font;
		font-style: normal;
		font-weight: 700;
		font-size: 28px;
		@include breakpoint-768{
			font-weight: 500;
			font-size: 20px;
		}
	}
	.trv-btm-title-large{
		font-family: $font-style2;
		font-weight: 900;
		font-size: 80px;
		line-height:1;
		text-transform: uppercase;
		color: $clr-yellow;
		margin-bottom: 0px;
		@include breakpoint-991{
			font-size: 46px;
		}
		@include breakpoint-768{
			font-size: 30px;
		}
	}
}

/** - Most Favorite Tour */
.trv-most-fav-tour-wrap{
	background-color: $bgcolor2;
	padding: 50px;
	@include breakpoint-1366{
		padding: 36px;
	}
	@include breakpoint-1199{
		padding: 0px;
	}
	.trv-most-fav-tour-mid{
		position: relative;
		background-color: $clr-primary;
		border-radius: 30px;
		overflow: hidden;
		@include breakpoint-1199{
			border-radius: 0px;
		}
		.trv-most-fav-tour-top{
			padding: 100px 20px 75px 20px;
			max-width: 1620px;
			margin: 0px auto;
			@include breakpoint-991{
				padding: 50px 30px 30px 30px;
			}
			@include breakpoint-575{
				padding: 50px 12px 30px 12px;
			}
		}
	}
	.trv-most-fav-tour-top{
		display: flex;
		align-items: center;
		@include breakpoint-991{
			display: block;
		}
	}
	.trv-most-fav-tour-t-left{
		max-width: 500px;
		.trv-hpy-cus{
			display: flex;
			margin-bottom: 30px;
			.trv-hpy-cus-count{
				span{
					display: block;
					font-weight: 900;
					font-size: 22px;
					color: $clr-green;
				}
				p{
					margin-bottom: 0px;
					text-transform: uppercase;
					font-weight: 500;
					font-size: 12px;
					color: $clr-white;
				}
			}
		}
	}
	.trv-most-fav-title{
		padding-left: 100px;
		font-family: $font-style2;
		font-weight: 900;
		font-size: 120px;
		line-height: 1.2;
		text-transform: uppercase;
		color:$clr-white;
		@include breakpoint-1366{
			font-size: 90px;
		}
		@include breakpoint-1024{
			font-size: 70px;
		}
		@include breakpoint-991{
			padding-left: 0px;
			padding-top: 30px;
		}
		@include breakpoint-768{
			font-size: 48px;
		}
		@include breakpoint-640{
			font-size: 34px;
		}
		span{
			display: block;
			color: $clr-yellow;
			@include breakpoint-640{
				display: inline-block;
				padding-right: 5px;
			}
		}
	}
	.trv-most-fav-media{
		position: absolute;
		top: 0px;
		right: 0px;
		@include breakpoint-991{
			width: 35%;
		}
		@include breakpoint-768{
			width: 30%;
		}
		@include breakpoint-767{
			display: none;
		}
	}
}

.trv-most-fav-tour-bot{
	padding: 0px 34px 30px;
	@include breakpoint-575{
		padding: 0px 12px 30px;
	}
}
.trv-mf-tour-carousal{
	display: grid;
	.swiper-wrapper{
		 display: flex;
		.swiper-slide{
			flex: 1;
			transition: $transition;
			&:hover{
				flex: 2;
				@include breakpoint-991{
					flex: 1;
				}
			}
		}
	}
}
.trv-mf-tour-bx1{
	margin-bottom: 0.5px;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 30px;
	padding: 15px;
	transition: $transition;
	background-color: $clr-primary;
	.trv-media{
		img{
			height: 348px;
			object-fit: cover;
			object-position: center;
			border-radius: 20px;
			width: 100%;
		}
	}
	.trv-title{
		text-align: center;
		font-size: 28px;
		font-weight: 500;
		margin-top: 15px;
		margin-bottom: 5px;
		@include breakpoint-768{
			font-size: 22px;
		}
		a{
			color: $clr-white;
			transition: $transition;
			margin-bottom: 10px;
			display: block;
		}
		span{
			display: block;
			font-size: 16px;
			font-weight: 500;
			color: $clr-white;
			font-family: $font-style2;
		}
	}
	&:hover{
		background-color: $bgcolor2;
		.trv-title{
			a{
				color: $clr-primary;
			}
			span{
				color: $clr-primary;
			}
		}
	}
}

/** - Search style 1 */
.trv-search-st1-wrap{
	background-color: $bgcolor1;
	padding: 70px 20px 0px 20px;
	@include breakpoint-1024{
		padding: 50px 20px 0px 20px;
	}
}
.trv-search-st1{
	max-width: 1000px;
	margin: 0px auto;
	height: 100px;
	padding: 7px;
	background-color: $bgcolor2;
	border-radius: 100px;
	@include breakpoint-990{
		height: auto;
		border-radius:20px;
	}
	.trv-search-st1-bg{
		background-color: $clr-white;
		border-radius: 100px;
		padding:16px 13px 9px 40px;
		@include breakpoint-990{
			border-radius: 20px;
			padding:30px;
		}
	}
	.trv-search-st1-column-wrap{
		display: flex;
		justify-content: space-between;
		@include breakpoint-990{
			flex-wrap: wrap;
		}
	}
	.trv-search-st1-column-last{
		@include breakpoint-990{
			width: 100%;
		}
	}
	.trv-search-st1-search-btn{
		
		.srch-btn{
			font-size: 28px;
			color: $clr-white;
			border: none;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			background-color: $clr-primary;
			transition: $transition;
			@include breakpoint-990{
				width: 100%;
				border-radius: 10px;
			}
			&:hover{
				color: $clr-primary;
				background-color: $clr-yellow;
			}
		}
	}
	.trv-search-st1-column{
		width: 170px;
		@include breakpoint-990{
			width: 48%;
			margin-bottom: 20px;
			border-bottom: 1px solid $bgcolor2;
		}
		@include breakpoint-575{
			width: 100%;
		}
		label{
			padding-bottom: 5px;
			i{
				display: inline-block;
				margin-right: 20px;
				img{
					height: 20px;
					width: 100%;
				}
			}
		}
		.form-control{
			background-color: transparent;
			height: 34px;
			padding: 0px;
			font-family: $heading-font;
			font-weight: 700;
			font-size: 20px;
			line-height: 1.2;
			color: $clr-primary;
			background-image: none;
			&:focus{
				box-shadow: none;
			}
			&.bootstrap-select > .dropdown-toggle{
				border: none;
				background-color: transparent;
				background-image: none;
				height: 34px;
				padding: 5px 0px 0px 0px;
				font-family: $heading-font;
				font-weight: 700;
				font-size: 20px;
				line-height: 1.2;
				color: $clr-primary;
				&:after {
					margin-top: 0;
					font-size: 14px;
					color: #9d9d9d;
				}
			}
		}
		.btn-quantity2{
			@include breakpoint-990{
				max-width: inherit;
				width: auto;
				margin-right: 42px;
				display: flex;
			}
		}
	}
	.input-group-text{
		background-color: transparent;
		border: none;
		color: #9d9d9d;
	}
	input::placeholder{
		color: $clr-primary;
	}


}
.btn-quantity2{
	max-width:80px;
	width:100%;
	margin-right:30px;
	display:inline-block;
	@include breakpoint-420{
		max-width: 34px;
	}
	.input-group {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
	}
	.bootstrap-touchspin{
		.input-group-btn-vertical{
			position: relative;
			white-space: nowrap;
			width: 1%;
			display: flex;
			>.btn{
				float: none;
				position: relative;
				background: none;
				width: 20px;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #9d9d9d;
				font-size: 20px;
				&:before{display: none;}
			}
			.bootstrap-touchspin-up{
				border-radius: 0;
				border-top-right-radius: 0;
			}
			.bootstrap-touchspin-down{
				margin-top: 0px;
				border-radius: 0;
				border-bottom-right-radius: 0;
			}
			i{
				position: absolute;
				top: 7px;
				left: 7px;
				font-size: 16px;
				font-weight: normal;
				color: $clr-white;
			}
		}
	}
}

/** - Banner Style 2 */
.trv-banner-2-wrap{
	height: 950px;
	position: relative;
	background-color: $clr-primary;
	background-size: cover;
	@include breakpoint-1366{
		height: 768px;
	}
	@include breakpoint-991{
		height: auto
	}
	.trv-banner-2-overlay{
		background-color: rgba(0,0,0,0.2);
		border-radius: 30px;
		margin: 0px 35px 35px 35px;
		top: 35px;
		height: 880px;
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		@include breakpoint-1366{
			height: 698px;
		}
		@include breakpoint-991{
			height: auto;
			margin: 0px;
			top: 0px;
			border-radius: 0px;
			text-align: center;
		}
		.trv-banner-2-social{
			padding-left: 50px;
			color: $clr-white;
			display: flex;
			align-items: center;
			z-index: 4;
			@include breakpoint-991{
				padding: 30px 0px 30px 0px;
				justify-content: center;
			}
			span{
				padding-right: 105px;
				font-size: 12px;
				line-height: 18px;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				position: relative;
				display: inline-block;
				&:after{
					position: absolute;
					width: 64px;
					height: 1px;
					background-color: $clr-white;
					content: '';
					right: 20px;
					top: 50%;
					transform: translateY(-50%);
				}

			}
			ul{
				margin: 0px;
				list-style: none;
				display: flex;
				li{
					a{
						color: $clr-white;
						font-size: 20px;
						margin-right: 20px;
						transition: $transition;
						display: block;
						&:hover{
							color: $clr-green;
							transform:translateY(-5px);
						}
					}
				}
			}
		}
	}
	.trv-banner-2-content-section{
		max-width: 1920px;
		margin: 0px auto;
		position: relative;
		width: 100%;
	}
	.trv-banner-2-text{
		padding-top: 200px;
		padding-left: 70px;
		max-width: 1020px;
		@include breakpoint-1366{
			padding-left: 30px;
			padding-top: 150px;
		}
		@include breakpoint-991{
			padding: 150px 20px 0px;
		}
		.trv-banner-2-text-mid{position: relative;}
		.trv-banner-2-text-small{
			font-family: $font-style3;
			font-size: 48px;
			line-height: 70px;
    		color: $clr-white;
			padding-left: 50px;
			display: block;
			@include breakpoint-1199{
				font-size: 28px;
			}
			@include breakpoint-991{
				padding: 0px;
			}
		}
		.trv-banner-2-text-large{
			font-family: $font-style3;
			font-size: 200px;
			color: $clr-white;
			margin-bottom: 20px;
			position: relative;
			display: inline-block;
			animation: slide-left 5s linear infinite alternate-reverse both;
			text-shadow: 6px 18px 2px rgba(0, 0, 0, 0.2);
			@include breakpoint-1600{
				font-size: 175px;
			}
			@include breakpoint-1366{
				font-size: 110px;
			}
			@include breakpoint-767{
				font-size:58px;
				text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
			}
			@include breakpoint-420{
				font-size:38px;
			}
		}
		.trv-banner-text-detail{
			font-size: 28px;
			line-height: 30px;
			color: $clr-white;
			position: relative;
			margin-bottom: 30px;
			font-style: italic;
			padding-left: 50px;
			@include breakpoint-1199{
				font-size: 20px;
			}
			@include breakpoint-991{
				padding: 0px;
			}
		}
		.trv-banner-btn{
			margin-bottom: 40px;
			padding-left: 50px;
			position: relative;
			z-index: 4;
			@include breakpoint-991{
				padding: 0px;
			}
		}
	}
	.trv-cloud-1{
		position: absolute; 
		top: 150px; 
		width: 100%;
		z-index: 10;
		img{
			width: auto;
		}
	}
	.trv-cloud-2{
		position: absolute; 
		top: 0px;
		width: 100%;
		z-index: 10;
		img{
			width: auto;
		}
	}
	.twm-img-bg-circle-area{
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		overflow: hidden;
		z-index: -1;
		@include breakpoint-991{
			display: none;
		}
		.twm-img-bg-circle1-wrap{
			position: absolute;
			top: 50%;
			transform: translate(-50% , -50%);
			width: 374px;
			height: 374px;
			left: 50%;
			margin-left: 200px;
			.twm-img-bg-circle1{
				left: 0%;
				position: absolute;
				z-index: 2;
				animation: rotate-center 10s linear infinite both;
				span{
					width: 374px;
					height: 374px;
					border-radius: 50%;
					border: 1px solid rgba(255,255,255,0.3);
					display: block;
					position: relative;
					&:after{
						width: 14px;
						height: 14px;
						background-color: $clr-white;
						border-radius: 50%;
						content: '';
						position: absolute;
						right: 35px;
						top: 16%;
						z-index: 9;
					}
					
				}
			}
		}
		.twm-img-bg-circle2-wrap{
			position: absolute;
			top: 50%;
			transform: translate(-50% , -50%);
			width: 574px;
			height: 574px;
			left: 50%;
			margin-left: 200px;
			.twm-img-bg-circle2{
				left: 0px;
				position: absolute;
				z-index: 2;
				animation: rotate-center 10s linear infinite reverse both;
				span{
					width: 574px;
					height: 574px;
					border-radius: 50%;
					border: 1px solid rgba(255,255,255,0.3);
					display: block;
					&:after{
						width: 14px;
						height: 14px;
						background-color: $clr-green;
						border-radius: 50%;
						content: '';
						position: absolute;
						right: 75px;
						bottom: 14%;
						z-index: 9;
					}
				}
			}
		}
		.twm-img-bg-circle3-wrap{
			position: absolute;
			top: 50%;
			transform: translate(-50% , -50%);
			width: 774px;
			height: 774px;
			left:50%;
			margin-left: 200px;
			.twm-img-bg-circle3{
				left: 0px;
				position: absolute;
				z-index: 2;
				animation: rotate-center 10s linear infinite both;
				span{
					width:774px;
					height: 774px;
					border-radius: 50%;
					border: 1px solid rgba(255,255,255,0.3);
					display: block;
					&:before{
						width: 14px;
						height: 14px;
						background-color: $clr-yellow;
						border-radius: 50%;
						content: '';
						position: absolute;
						left: 3px;
						top:38%;
						z-index: 9;
					}
				}
			}
		}
	}
	.trv-banner-2-media{
		position: absolute;
		z-index: 12;
		top: 0px;
		right: 0px;
		@include breakpoint-991{
			position: inherit;
		}
		
		.media1{
			position: absolute;
			top: 160px;
  			left: -55%;
			@include breakpoint-1600{
				left: auto;
				width: 55%;
				right: 55%;
			}
			@include breakpoint-1366{
				right: 40%;
			}
			@include breakpoint-1199{
				width: 30%;
				right: 30%;
			}
			@include breakpoint-991{
				display: none;
			}

		}
		.media2{
			position: relative;
			top:160px;
			@include breakpoint-1440{
				width: 80%;
				margin-left: auto;
				margin-right: 50px;
			}
			@include breakpoint-1366{
				width: 70%;
			}
			@include breakpoint-1199{
				width: 50%;
			}
			@include breakpoint-991{
				top:auto;
				margin: 0px auto;
			}

		}
	}

	.trv-bnr2-offer{
		position: absolute;
		right:50px;
		top: 50%;
		transform: translateY(-50%);
		color: $clr-white;
		z-index: 15;
		@include breakpoint-1199{
			right:20px;
		}
		@include breakpoint-991{
			position: inherit;
			right: auto;
			top: auto;
			transform: none;
			padding-bottom: 50px;
		}
		span{
			display: block;
		}
		.ofr-get-up{
			font-family: $font-style2;
			font-weight: 300;
			font-size: 22px;
			line-height: 26px;
			font-style: italic;
			transform: rotate(-15deg);
			@include breakpoint-1199{
				font-size: 16px;
			}
		}
		.ofr-price{
			font-family:  $font-style2;
			font-style: italic;
			font-weight: 900;
			font-size: 82px;
			line-height:0.75;
			transform: rotate(-15deg);
			@include breakpoint-1199{
				font-size: 50px;
			}
		}
		.ofr-discount{
			font-family: $font-style2;
			font-weight: 700;
			font-size: 24px;
			line-height: 24px;
			text-transform: capitalize;
			transform: rotate(-15deg);
			margin-top: -5px;
  			margin-left: 30px;
			@include breakpoint-1199{
				font-size: 16px;
			}
		}
	}
	.trv-search-st2{
		@include breakpoint-991{
			margin: 0px auto;
			width: 100%;
		}
		@include breakpoint-767{
			width: 100%;
		}
	}

}

/** - Search Style 2 */
.trv-search-st2{
	width: 650px;
	margin-left: 50px;
	margin-bottom: 30px;
	position: relative;
	z-index: 100;
	
	.trv-search-st1-bg{
		height: 80px;
		background-color: $clr-white;
		border-radius: 100px;
		padding:10px 10px 10px 40px;
		@include breakpoint-767{
			height: auto;
		}
		@include breakpoint-640{
			border-radius: 20px;
			padding: 20px;
		}
	}
	.trv-search-st1-column-wrap{
		display: flex;
		justify-content: space-between;
		@include breakpoint-640{
			display: block;
		}
	}
	.trv-search-st1-search-btn{
		.srch-btn{
			font-size: 28px;
			color: $clr-primary;
			border: none;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			background-color: $clr-green;
			transition: $transition;
			@include breakpoint-640{
				border-radius: 10px;
				width: 100%;
			}
			@include breakpoint-575{
				font-size: 18px;
				height: 40px;
			}
			&:hover{
				color: $clr-primary;
				background-color: $clr-yellow;
			}
		}
	}
	.trv-search-st1-column{
		width: 136px;
		text-align: left;
		@include breakpoint-640{
			width: 100%;
			margin-bottom: 20px;
		}
		label{
			padding-bottom: 0px;
			font-family: $heading-font;
			font-weight: 700;
			font-size: 20px;
			color: $clr-primary;
		}
		.form-control{
			background-color: transparent;
			height: 24px;
			padding: 0px;
			font-family:$font-style2;
			font-weight: 400;
			font-size: 14px;
			line-height: 1.2;
			color: #545454;
			background-image: none;
			&:focus{
				box-shadow: none;
			}

			&.bootstrap-select > .dropdown-toggle{
				border: none;
				background-color: transparent;
				padding: 2px 0px 0px 0px;
				font-size: 14px;
				color: #545454;
				&:after {
					margin-top: 0;
				}
			}
		}
	}
	.input-group-text{
		background-color: transparent;
		border: none;
		color: #9d9d9d;
		padding: 0;
		margin-top: 4px;
		margin-right: 4px;
	}
	input::placeholder{
		color: #545454;
	}

	.btn-quantity2{
		@include breakpoint-640{
			max-width: inherit;
			width: auto;
			margin-right: 42px;
			display: flex;
		}
	}
	
}

/** - Tv step style 2 start */
.trv-step-st2-wrap{
	background-color: $clr-white;
	position: relative;
	overflow: hidden;
	z-index: 1;
	.trv-left-bag{
		position: absolute;
		left: 0px;
		bottom: 0px;
		z-index: -1;
		@include breakpoint-991{
			display: none;
		}
	}
	.trv-right-tent{
		position: absolute;
		right: 0px;
		bottom: 0px;
		z-index: -1;
		@include breakpoint-991{
			display: none;
		}
	}
}
.trv-step-st2-bx1{
	border-radius: 30px;
	background: linear-gradient(to bottom,  rgba(83,164,192,1) 45%,rgba(255,255,255,1) 100%);
	padding: 50px 30px 20px 30px;
	margin-bottom: 30px;
	.trv-icon{
		text-align: center;
		margin-bottom: 20px;
		.trv-icon-back{
			width: 120px;
			height: 120px;
			background-color: #45869D;
			border-radius: 50%;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		.trv-icon-front{
			width: 90px;
			height: 90px;
			background-color: $clr-white;
			border-radius: 50%;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
			img{
				max-width: 48px;
				width: 100%;
				filter: brightness(0) saturate(100%) invert(73%) sepia(22%) saturate(928%) hue-rotate(153deg) brightness(78%) contrast(89%);
			}
		}
	}
	.trv-content{
		padding-left: 10px;
		padding-right: 10px;
		.trv-title{
			font-size: 28px;
			font-weight: 500;
			font-family: $heading-font;
			color: $clr-white;
			line-height: 1.2;
			margin-bottom: 15px;
			@include breakpoint-991{
				font-size: 22px;
			}
		}
		p{
			font-size: 16px;
			font-weight: 400;
			font-family: $font-style2;
			color: $clr-white;
			line-height: 1.4;
			margin-bottom: 20px;
		}
	}
	.trv-btm-txt-part{
		display: flex;
		align-items:  end;
		justify-content: space-between;
		.media{
			img{
				max-width: 232px;
				width: 100%;
				max-height: 155px;
				height: 100%;
			}
		}
		.bld-num{
			font-family: $font-style2;
			font-size: 76px;
			font-weight: 900;
			color: $clr-white;
			line-height: 1.2;
			filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
			margin-left: 30px;
			margin-bottom: 0px;
		}
	}

	&.st-blue{
		margin-top: 120px;
		@include breakpoint-1199{
			margin-top:0px;
		}
	}

	&.st-pink{
	background: linear-gradient(to bottom,  rgba(255,162,182,1) 55%,rgba(255,255,255,1) 100%);
	margin-top: 60px;
	@include breakpoint-1199{
		margin-top:0px;
	}
		.trv-icon{
			.trv-icon-back{
				background-color: #CE8594;
			}
			.trv-icon-front{
				img{
					filter: brightness(0) saturate(100%) invert(66%) sepia(47%) saturate(380%) hue-rotate(301deg) brightness(101%) contrast(102%);
				}
			}
		}
	}

	&.st-green{
	background: linear-gradient(to bottom,  rgba(6,97,104,1) 46%,rgba(255,255,255,1) 100%);
		.trv-icon{
			.trv-icon-back{
				background-color: #047881;
			}
			.trv-icon-front{
				img{
					filter: brightness(0) saturate(100%) invert(46%) sepia(28%) saturate(721%) hue-rotate(118deg) brightness(97%) contrast(86%);
				}
			}
		}
	}

}

/** - Tv pricing style 3 start */
.trv-price-bx1-wrap{
	position: relative;
	padding-bottom: 340px;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-color: $bgcolor1;
	overflow: hidden;
	z-index: 1;
	@include breakpoint-1366{
		background-position: bottom right;
	}
	@include breakpoint-1199{
		padding-bottom: 200px !important;
	}
	@include breakpoint-768{
		padding-bottom: 100px !important;
	}
	.left-hot-ballon{
		position: absolute;
		left: -115px;
		top: 40%;
		width: 230px;
		animation: slide-top2 20s linear infinite alternate-reverse;
		z-index: -1;
	}
}
.trv-price-bx1{
	margin-bottom: 30px;
	padding: 30px;
	border: 10px solid rgba(41, 137, 145, 0.2);
	border-radius: 110px;
	background-color: $clr-white;
	@include breakpoint-1024{
		border-radius: 40px;
	}
	.trv-media{
		margin-bottom: 40px;
		@include breakpoint-420{
			margin-bottom: 20px;
		}
		img{
			border-radius: 500px;
			@include breakpoint-420{
				border-radius: 20px;
			}
		}
	}
	.info{
		.trv-price-head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40px;
			.trv-pricing-title{
				font-family: $heading-font;
				font-size: 28px;
				font-weight: 500;
				color: $clr-primary;
				line-height: 1.2;
				margin-bottom: 0px;
				@include breakpoint-1199{
					font-size: 22px;
				}
			}

			.trv-plan-price{
				text-align: center;
				.price{
					color: $clr-primary;
					font-size: 34px;
					line-height: 1.3;
					font-weight: 900;
					display: block;
				}
				.price-duration{
					font-size: 16px;
					display: block;
				}
			}
		}


		.trv-list{
			list-style: none;
			margin-bottom: 35px;
			li{
				margin-bottom: 14px;
				font-family: $font-style2;
				font-size: 16px;
				font-weight: 500;
				color: $clr-primary;
				position: relative;
				padding-left: 44px;
				&:last-child{margin-bottom: 0px;}
				i{
					color: $clr-yellow;
					font-size: 24px;
					margin-right: 20px;
					position: absolute;
					left: 0px;
					top: -5px;
				}
			}
		}

	}
	.trv-discover-btn{
		text-align: center;
	}
}
.trv-price-bx1.active-bx{
	border: 10px solid rgba(255, 170, 13, 0.2);
}
.trv-price-bx1-btm-shape{
	background-repeat: repeat-x;
	height: 117px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
}
/** - Price table 2 */
.trv-price-bx2{
	margin-bottom: 30px;
	padding: 30px;
	border-radius: 30px;
	background-color: $clr-primary;
	@include breakpoint-420{
		padding: 20px;
	}
	.trv-media{
		margin-bottom: 10px;
		img{
			border-radius: 30px;
			width: 100%;
		}
	}
	.info{
		.trv-price-head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40px;
			@include breakpoint-768{
				margin-bottom: 15px;
			}
			.trv-pricing-title{
				font-family: $heading-font;
				font-size: 28px;
				font-weight: 500;
				color: $clr-white;
				line-height: 1.2;
				margin-bottom: 0px;
				@include breakpoint-768{
					font-size: 22px;
				}
			}

			.trv-plan-price{
				text-align: center;
				.price{
					color: $clr-white;
					font-size: 34px;
					line-height: 1.3;
					font-weight: 900;
					display: block;
					@include breakpoint-768{
						font-size: 30px;
					}
				}
				.price-duration{
					font-size: 16px;
					display: block;
					color: $clr-white;
				}
			}
		}

		.trv-list{
			list-style: none;
			margin-bottom: 35px;
			li{
				margin-bottom: 14px;
				font-family: $font-style2;
				font-size: 16px;
				font-weight: 500;
				color: $clr-white;
				position: relative;
				padding-left: 44px;
				&:last-child{margin-bottom: 0px;}
				i{
					color: $clr-yellow;
					font-size: 24px;
					margin-right: 20px;
					position: absolute;
					left: 0px;
					top: -5px;
				}
			}
		}

	}
	.trv-discover-btn{
		text-align: left;
	}
}
/** - Price table 3 */
.trv-price-bx3{
	margin-bottom: 30px;
	padding: 30px;
	border: 1px solid rgba(41, 137, 145, 0.2);
	border-radius: 30px;
	background-color: $bgcolor2;
	@include breakpoint-420{
		padding: 20px;
	}
	.trv-media{
		margin-bottom: 10px;
		img{
			border-radius: 30px;
			width: 100%;
		}
	}
	.info{
		.trv-price-head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40px;
			@include breakpoint-768{
				margin-bottom: 15px;
			}
			.trv-pricing-title{
				font-family: $heading-font;
				font-size: 28px;
				font-weight: 500;
				color: $clr-primary;
				line-height: 1.2;
				margin-bottom: 0px;
				@include breakpoint-768{
					font-size: 22px;
				}
			}

			.trv-plan-price{
				text-align: center;
				.price{
					color: $clr-primary;
					font-size: 34px;
					line-height: 1.3;
					font-weight: 900;
					display: block;
					@include breakpoint-768{
						font-size: 34px;
					}
				}
				.price-duration{
					font-size: 16px;
					display: block;
				}
			}
		}

		.trv-list{
			list-style: none;
			margin-bottom: 35px;
			li{
				margin-bottom: 14px;
				font-family: $font-style2;
				font-size: 16px;
				font-weight: 500;
				color: $clr-primary;
				position: relative;
				padding-left: 44px;
				&:last-child{margin-bottom: 0px;}
				i{
					color: $clr-yellow;
					font-size: 24px;
					margin-right: 20px;
					position: absolute;
					left: 0px;
					top: -5px;
				}
			}
		}

	}
	.trv-discover-btn{
		text-align: left;
	}
}

/** - Tv contact form style 1 start */
.trv-contact-form{
	background-color: $clr-white;
	overflow: hidden;
	.trv-cot-media-section{
		position: relative;
		background-size: cover;
		@include breakpoint-991{
			height: 500px;
		}
		.trv-cot-media-info{
			background: rgba(6, 97, 104, 0.51);
			backdrop-filter: blur(5px);
			border-radius: 30px;
			padding: 35px 50px;
			position: absolute;
			bottom: 50px;
			right: 50px;
			left: 50px;
			@include breakpoint-1024{
				padding: 20px;
				text-align: center;
			}
			.trv-subtitle{
				font-family: $font-style3;
				font-size: 52px;
				font-weight: 400;
				color: $clr-yellow;
				@include breakpoint-1199{
					font-size: 26px;
				}
				@include breakpoint-1024{
					font-size: 22px;
				}
			}
			.trv-title{
				font-family: $font-style3;
				font-size: 60px;
				font-weight: 400;
				color: $clr-white;
				margin-bottom: 0px;
				@include breakpoint-1199{
					font-size: 34px;
				}
				@include breakpoint-1024{
					font-size: 28px;
				}
			}
		}
	}
	
}
.trv-contact-right-part{
	padding: 50px 50px 50px 38px;
	@include breakpoint-1200{
		padding: 12px 12px 12px 0px;
	}
	@include breakpoint-991{
		padding: 50px 20px 50px 20px;
	}
	@include breakpoint-768{
		padding: 50px 36px 50px 36px;
	}
	@include breakpoint-575{
		padding: 50px 12px 50px 12px;
	}
}

.trv-form{
	background-color:$clr-light-yellow;
	padding: 60px 50px;
	border-radius: 30px;
	@include breakpoint-1200{
		padding: 30px;
	}
	@include breakpoint-991{
		max-width: 640px;
		margin: 0px auto;
	}
	@include breakpoint-768{
		max-width: inherit;
	}
	@include breakpoint-400{
		padding: 20px;
	}
	.form-group{
		margin-bottom: 20px;
		.form-control{
			display: block;
			width: 100%;
			height: 74px;
			border-radius: 50px;
			border: 1px solid rgba(41, 137, 145, 0.22);
			padding: 20px 40px;
			@include breakpoint-575{
				padding: 5px 15px;
				height: 50px;
				font-size: 14px;
			}
			&::placeholder{
				font-family: $font-style2;
				font-size: 16px;
				font-weight: 400;
				color: $common-font-color;
			}
		}
		textarea.form-control{
			width: 100%;
			height: 168px;
			padding-left: 40px;
			padding-top: 30px;
			border-radius: 30px;
			border: 1px solid rgba(41, 137, 145, 0.22);
			margin-bottom: 30px;
			resize: none;
			@include breakpoint-400{
				padding: 20px 10px 10px 10px;
			}
			&::placeholder{
				font-family: $font-style2;
				font-size: 16px;
				font-weight: 400;
				color: $common-font-color;
			}
		}
	}
}

/** - Blog Style 2 */
.trv-blog-style2-section{
	background-color: $bgcolor2;
	@include breakpoint-1024{
		padding-top: 50px;
		padding-bottom: 30px;
	}
}

/** - Gallery Section */
.trv-gallery-wrap{
	background-color: $clr-white;
	.trv-gallery-section{
		margin-bottom: 40px;
	}
	
	.trv-gallery-st1{
		position: relative;
		margin-bottom: 20px;
		overflow: hidden;
		border-radius: 30px;
		@include breakpoint-991{
			border-radius: 15px;
		}
		&.l-pic{
			img{
				height:250px;
				@include breakpoint-1199{
					height: 210px;
				}
				@include breakpoint-991{
					height: 160px;
				}
			}
		}
		&.p-pic{
			img{
				height: 520px;
				@include breakpoint-1199{
					height: 440px;
				}
				@include breakpoint-991{
					height: 340px;
				}
			}
		}
		.trv-gallery-st1-media{
			position: relative;
			background: $clr-black;
			text-align: center;
			overflow: hidden;
			img{
				position: relative;
				display: block;
				max-width: none;
				transition: opacity 0.35s, transform 0.35s;
				transform: translate3d(-10px,0,0);
				backface-visibility: hidden;
				width: 110%;
				object-fit: cover;
				object-position: bottom;
			}
			&:hover{
				img{
					opacity: 0.2;
					transform: translate3d(0,0,0);
				}
			}

		}
		.trv-gallery-st1-btn{
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			display: block;
			background-color: $clr-white;
			border-radius: 6px;
			color: $clr-primary;
			font-size: 22px;
			position: absolute;
			left: 50%;
			top: 50%;
			opacity: 0;
			transition: $transition;
		}
		&:hover{
			.trv-gallery-st1-btn{
				opacity: 1;
				transform: translate(-50% , -50%);
			}
		}
	
	}
	.trv-gallery-st1-box{
		margin-bottom: 20px;
		height: 520px;
		overflow: hidden;
		background: linear-gradient(180deg, rgba(12, 192, 206, 0) 40%, #066168 100%);
		border-radius: 30px;
		text-align: center;
		display: flex;
		align-items: end;
		justify-content: center;
		@include breakpoint-1199{
			height: 440px;
		}
		@include breakpoint-991{
			height: 340px;
			border-radius: 15px;
		}
		@include breakpoint-767{
			height: auto;
		}
		.trv-media{
			img{
				width: auto
			}
		}
		
	}
}

/** - Trending Destinations */
.trv-trend-des-wrap{
	background-color: $clr-white;
	position: relative;
	overflow: hidden;
	padding: 60px 0px 110px 0px;
	z-index: 1;
	@include breakpoint-1024{
		padding: 60px 0px 50px 0px;
	}
	@include breakpoint-991{
		border-top: 1px solid $bgcolor2;
		padding: 50px 0px 50px 0px;
	}
	.trv-trend-top-shadowbar{
		background-repeat: repeat-x;
		height: 136px;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		@include breakpoint-991{
			display: none;
		}
	}
	.trv-trend-bottom-shadowbar{
		background-repeat: repeat-x;
		height: 103px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		background-color: $bgcolor1;
		@include breakpoint-991{
			display: none;
		}
	}

	.trv-trend-des-section-content{
		padding: 150px 0px 35px 100px;
		max-width: 650px;
		@include breakpoint-991{
			padding: 0px 100px 30px 100px;
			max-width: inherit;
		}
		@include breakpoint-768{
			padding: 0px 36px 30px 36px;
		}
		@include breakpoint-767{
			max-width: 588px;
        	margin: 0px auto;
		}
		@include breakpoint-575{
			padding: 0px 12px 30px 12px;
		}
	}


}

.trv-step-bx4{
	margin-bottom: 20px;
	.trv-step-bx4-count{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color: $bgcolor2;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0px auto -20px;
		span{
			width: 60px;
			height: 60px;
			background-color: $clr-primary;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $clr-white;
			font-size: 28px;
			font-weight: 900;
			transition: $transition;
		}
	}
	.trv-step-bx4-info{
		background: rgba(6, 97, 104, 0.05);
		border: 6px solid #FFFFFF;
		box-shadow: 0px 15px 8px -4px rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(25px);
		border-radius: 30px 0px 30px 30px;
		padding: 30px;
		display: flex;
		align-items: center;
		.trv-media{
			min-width: 56px;
			width: 56px;
			margin-right: 20px;
			img{
				filter: brightness(0) saturate(100%) invert(27%) sepia(11%) saturate(5932%) hue-rotate(146deg) brightness(100%) contrast(95%);
			}
		}
		.trv-title{
			font-family: $heading-font;
			font-weight: 500;
			font-size: 20px;
			line-height: 1.2;
			color:$clr-primary;
			transition: $transition;
			
		}
	}

	&:hover{
		.trv-step-bx4-count{
			span{
				background-color: $clr-white;
				color: $clr-yellow;
			}
		}
	}
}

.trv-mask-section{
	position: absolute;
	top: 60px;
	right: 0px;
	z-index: -2;
	width:1100px;
	@include breakpoint-1680{
		width: 800px;
	}
	@include breakpoint-1366{
		width: 720px;
	}
	@include breakpoint-1365{
		width: 550px;
	}
	@include breakpoint-1199{
		width: 390px;
	}
	@include breakpoint-991{
		display: none;
	}
	img{
		width: 100%;
	}  
	
}

/** - Project Btn Filter */
.trv-trend-location-bx-wrap{
	position: relative; 
	width: 1110px; 
	overflow: hidden; 
	margin-left: 30px; 
	margin-bottom: 90px;
	@include breakpoint-1199{
		width: auto;
		margin-right: 30px;
	}
	@include breakpoint-991{
		margin-bottom: 0px;
	}
	@include breakpoint-575{
		margin-left: 12px;
		margin-right: 12px;
	}

}
.trv-trend-location-filter.pro-filtr-cate-carousal{
	list-style: none;
	margin: 0px 0px 15px 70px;
	span{
		position: relative;
		display: inline-block;
		font-size: 16px;
		font-weight: 500;
		color: $clr-primary;
		padding: 8px 20px;
		cursor: pointer;
		border-radius: 50px;
		transition: $transition;
		border: 1px solid $clr-primary;
		margin-right: 16px;
		&.active{
			background-color: $clr-primary;
			box-shadow: 0 8px 10px rgba(12,12,12,.1);
			color: $clr-white;
		}
		&:hover{
			background-color: $clr-primary;
			box-shadow: 0 8px 10px rgba(12,12,12,.1);
			color: $clr-white !important;
		}
		@include breakpoint-767{
			margin-bottom: 15px;
		}
		
	}
	@include breakpoint-767{
		margin:0px;
	}
}
.non-swiper-slide {
	display: none !important;
}

.trv-trend-location-bx{
	position: relative;
	.trv-trend-location-media{
		position: relative;
		overflow: hidden;
		background-color: $clr-white;
		text-align: center;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
		border-radius: 30px;
		padding: 15px;
		img{
			transition: opacity 0.35s, transform 0.35s;
			backface-visibility: hidden;
			position: relative;
			display: block;
			border-radius: 20px;
			transition: $transition;
		}
		&:hover{
			img{
				mix-blend-mode: luminosity;
				transform: translate3d(0,0,0);
			}
		}
	}
	.trv-trend-location-btn{
		border-radius: 10px;
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		display: block;
		background-color: $clr-yellow;
		color: $clr-primary;
		font-size: 22px;
		position: absolute;
		left:30px;
		top:30px;
		opacity: 0;
		transition: opacity 0.35s, transform 0.8s;
		transform: translate3d(-100%,0,0);
	}
	.trv-trend-location-title{
		padding: 15px 40px;
		border-radius: 10px 0px 0px 10px;
		display: block;
		background-color: $clr-primary;
		color: $clr-white;
		position: absolute;
		left:100%;
		bottom:30px;
		opacity: 0;
		transition: opacity 0.35s, transform 0.8s;
		transform: translate3d(100%,0,0);
		white-space: nowrap;
		font-family: $heading-font;
		font-weight: 500;
		font-size: 20px;
		line-height: 1.2;
		transition: $transition;
		&:hover{
			background-color: $clr-yellow;
			color: $clr-primary;
		}
	}
	&:hover{
		.trv-trend-location-btn{
			opacity: 1;
			transform: translate3d(0,0,0);
		}
		.trv-trend-location-title{
			opacity: 1;
			transform: translate3d(-100%,0,0);
		}
	}
}
.swiper-container.pro-filtr-cate-bx{
	.swiper-slide{
		.trv-trend-location-bx{
			margin: 15px;	
		}
	}
} 

/** - Banner Style 2 */
.trv-banner-3-wrap{
	height: 950px;
	overflow: hidden;
	position: relative;
	@include breakpoint-1600{
		height: 900px;
	}
	@include breakpoint-1366{
		background-size: cover;
		height: 768px;
	}
	@include breakpoint-991{
		height: 600px;
	}
	@include breakpoint-767{
		height: auto;
	}
	background-color: $clr-primary;
	.trv-banner-3-overlay{
		position: relative;
		z-index: 2;
		height: 100%;
	}
	.trv-banner-3-text{
		padding-top: 300px;
		width: 100%;
		text-align: center;
		@include breakpoint-1600{
			padding-top: 275px;
		}
		@include breakpoint-1366{
			padding-top: 225px;
		}
		@include breakpoint-640{
			padding-top: 150px;
		}
		.trv-banner-3-text-small{
			font-family: $font-style3;
			font-size: 60px;
			line-height: 70px;
    		color: $clr-green;
			display: block;
			margin-bottom: 20px;
			@include breakpoint-1600{
				font-size: 50px;
			}
			@include breakpoint-640{
				font-size: 30px;
			}
		}
		.trv-banner-3-text-large{
			font-family: $font-style2;
			font-size: 240px;
			line-height: 0.75;
			font-weight: 900;
			color: $clr-white;
			margin-bottom: 20px;
			position: relative;
			display: inline-block;
			animation: slide-left 5s linear infinite alternate-reverse both;
			text-transform: uppercase;
			background: linear-gradient(180deg, #FFFFFF 24.65%, #E0E0E0 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;

			@include breakpoint-1600{
				font-size: 180px;
			}
			@include breakpoint-1199{
				font-size: 140px;
			}
			@include breakpoint-991{
				font-size: 90px;
			}
			@include breakpoint-640{
				font-size: 46px;
			}
		}
	}

	.media1{
		position: absolute;
		bottom:0px;
		left: 0px;
		width: 1741px;
		@include breakpoint-1600{
			bottom:-50px;
		}
		@include breakpoint-1366{
			bottom: -10px;
			left: -26px;
			width: 1470px;
		}
		@include breakpoint-991{
			display: none;
		}
	}




}
.trv-search-st3-wrap-main{
	position: relative;
	.trv-search-st3-wrap{
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		z-index:2;
		@include breakpoint-767{
			position: inherit;
			transform: none;
			bottom: auto;
			left: auto;
			margin: 0px auto;
			padding: 20px 20px 20px;
		}
		&:before{
			content: '';
			height: 60px;
			background-color: $clr-white;
			position: absolute;
			left: -80px;
			bottom: -20px;
			right: -80px;
			border-radius: 50px 50px 0px 0px;
			z-index: -1;
			@include breakpoint-991{
				display: none;
			}
		}
		.trv-search-st2{
			margin: 0px;
			@include breakpoint-767{
				width: 100%;
			}
			.trv-search-st1-bg{
				border: 1px solid rgba(6, 97, 104, 0.2);
			}
			
		}
		@include breakpoint-640{
			.btn-quantity2{
				max-width: inherit;
				width: auto;
				margin-right: 42px;
				display: flex;
			}
		}
	}
}

/** - Tv service style 1 start */

.trv-service-st1{
	background-color: $clr-primary;
	padding: 120px 20px;
	@include breakpoint-1024{
		padding: 50px 20px;
	}
	.trv-service-back-bg{
		background-color: $bgcolor2;
		max-width: 1760px;
		margin: 0px auto 60px;
		padding: 60px;
		border-radius: 60px;
		@include breakpoint-1024{
			padding: 20px;
			border-radius: 30px;
		}
		> .row{
			grid-gap: 24px 0px;
		}
		.trv-service-bx1{
			background-color: $clr-white;
			border-radius: 30px;
			padding: 15px;
			text-align: center;
			box-shadow: 0px 30px 26px rgba(41, 137, 145, 0.2);
			border: 1px solid rgba(6, 97, 104, 0.18);
			transition: $transition;
			.trv-media{
				margin-bottom: 20px;
				img{
					border-radius: 20px;
					width: 100%
				}
			}
			.trv-info{
				.trv-title{
					font-family: $heading-font;
					font-size: 28px;
					font-weight: 500;
					line-height: 1.2;
					margin-bottom: 0px;
					@include breakpoint-768{
						font-size: 22px;
					}
					a{
						color: $clr-primary;
						transition: $transition;
					}
				}
			}
			&:hover{
				box-shadow: none;
				background-color: $clr-primary;
				.trv-info{
					.trv-title{
						a{
							color: $clr-yellow;
						}
					}
				}

			}
		}
	}
}



/** - Gallery */
.tw-sidebar-gallery{
	background-color:$clr-white;
	border: 1px solid rgba(6, 97, 104, 0.2);
	border-radius: 30px;
	padding: 40px;
	@include breakpoint-1199{
		padding: 20px;
		border-radius: 16px;
	}
	ul{
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		grid-gap: 4px 4px;
		margin-bottom: 0px;
		@include breakpoint-991{
			grid-gap: 4px 0.5%;
		}
		@include breakpoint-575{
			grid-gap: 2px 0.5%;
		}
		li{
			width: calc(33.7% - 4px);
			@include breakpoint-991{
				width: 33%;
			}
			.tw-service-gallery-thumb{
				position: relative;
				z-index: 1;
				transition: $transition;
			}
			a{
				display: block;
				text-align: center;
				position: relative;
				background-color: $clr-primary;
				border-radius: 6px;
				img{
					transition: $transition;
					border-radius: 6px;
					width: 100%;
					height: 106px;
					object-fit: cover;
					object-position: center;
					@include breakpoint-1199{
						height: 86px;
					}
					@include breakpoint-1199{
						height: auto;
					}
				}
				i{
					opacity: 0;
					width: 30px;
					height: 30px;
					line-height: 30px;
					border-radius: 50%;
					background-color: $clr-white;
					color: $clr-primary;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50% , -50%);
					transition: $transition;
				}
			}
			&:hover{
				a{
					img{opacity: 0.3;}
					i{
						opacity: 1;
					}
				}
			}
		}
	}
}

/** - Destination Details */
.trv-detail-mid-wrap{
	margin: 0px auto 30px;
	max-width: 1056px;
	padding: 0px 15px;
}
.trv-detail-slider{
	margin-bottom: 25px;
	.trv_d-slider{
		.trv_d-slider-media{
			border-radius: 30px;
			overflow: hidden;
		}
		img{
			border-radius: 30px;
		}
	}
}

.trv-detail-bx-wrap{
	border-radius: 30px;
	padding: 30px;
	background-color: $clr-white;
	@include breakpoint-575{
		padding: 20px;	
	}
	.trv-inr-para{
		margin-bottom: 30px;
		p{
			font-size: 16px;
		}
	}

	
}

blockquote{
	margin: 30px 0 30px 0px;
	.trv-bq-content{
		padding-left: 30px;
		margin: 0px 0 20px 70px;
		position: relative;
		z-index: 1;
		font-size: 20px;
		color: $clr-primary;
		border-left: 2px solid $clr-primary;
		font-weight: 500;
		font-family: $heading-font;

		@include breakpoint-480{
			padding: 0px;
			font-size: 15px;
			margin-left: 0px;
			margin-top: 0px;
			border-left:0px;
		}
		.quote-left {
			position: absolute;
			font-size: 80px;
			left:-70px;
			right: auto;
			top: auto;
			color:$clr-yellow;
			width: 48px;
			min-width: 48px;
			margin-right: 30px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			@include breakpoint-480{
				position: inherit;
				left: auto;
				right: inherit;
				top: inherit;
				padding-bottom: 20px;
			}
			i{
				font-size: 74px;
				line-height: 0.75;
				padding-top: 5px;
			}
		}
	}
	.trv-bq-atr-name{
		font-size: 18px;
		font-weight: 700;
		position: relative;
		padding-left:48px;
		font-family: $heading-font;
		&:before{
			content: '';
			height: 2px;
			width: 38px;
			background-color: $clr-yellow;
			left: 0px;
			top: 50%;
			transform: translateY(-50%);
			position: absolute;
		}
	}
		
}

.trv-inner-title-lg{
	font-family: $heading-font;
	font-weight: 500;
	font-size: 36px;
	line-height:1.2;
	color: $clr-primary;
	margin-bottom: 20px;
	@include breakpoint-768{
		font-size: 28px;
	}
}

.trv-inner-title-sm{
	font-family: $heading-font;
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	color: $clr-primary;
	margin-bottom: 25px;
	@include breakpoint-768{
		font-size: 22px;
	}
}

.trv-checklist-st1{
	padding: 0px;
	list-style: none;
	margin-bottom: 40px;
	li{
		font-family: $font-style2;
		font-size: 18px;
		font-weight: 400;
		color: $clr-primary;
		position: relative;
		padding-left: 45px;
		margin-bottom: 18px;
		@include breakpoint-768{
			font-size: 16px;
		}
		i{
			position: absolute;
			font-size: 24px;
			color: $clr-green;
			left: 0px;
			top: -3px;
		}
		span{
			font-weight: 600;
		}
	}
}

.trv-de-list-st1{
	background-color: $clr-light-yellow;
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 40px;
	@include breakpoint-420{
		padding: 30px;
	}
	.trv-list-st-1{
		list-style: none;
		padding: 0px;
		margin-bottom: 0px;
		li{
			margin-bottom: 30px;
			&:last-child{
				margin-bottom: 0px;
			}
			.title{
				font-family: $heading-font;
				font-size: 24px;
				font-weight: 500;
				color: $clr-primary;
				line-height: 1.2;
				margin-bottom: 10px;
				@include breakpoint-768{
					font-size: 20px;
				}
			}
			.text{
				font-family: $font-style2;
				font-size: 16px;
				font-weight: 400;
				color: $common-font-color;
				line-height: 1.4;
				&:last-child{
					margin-bottom: 0px;
				}
			}
		}
	}
}

.trv-checklist-st2-wrap{
	background-color: $clr-light-yellow;
	border-radius: 30px;
	padding: 40px 40px 10px 40px;
	margin-bottom: 40px;
	@include breakpoint-420{
		padding: 30px 30px 0px 30px;
	}
	.trv-checklist-st2{
		margin-bottom: 30px;
	}
}
.trv-checklist-st2{
	padding: 0px;
	list-style: none;
	margin-bottom: 0px;
	li{
		font-family: $font-style2;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.2;
		color: $clr-primary;
		position: relative;
		padding-left: 45px;
		margin-bottom: 18px;
		@include breakpoint-768{
			font-size: 16px;
		}
		i{
			position: absolute;
			font-size: 24px;
			color: $clr-green;
			left: 0px;
			top: -3px;
		}
		span{
			font-weight: 600;
		}
		&:last-child{
			margin-bottom: 0px;
		}
	}
}
.trv-list-disable{
	li{
		i{
			color: #cacaca;
		}
	}	
}

.trv-clist-st-3-wrap{
	background-color: $clr-light-yellow;
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 40px;
	@include breakpoint-420{
		padding: 20px;
	}
	.trv-list-st-3{
		padding: 0px;
		list-style: none;
		margin-bottom: 0px;
		li{
			margin-bottom: 30px;
			&:last-child{
				margin-bottom: 0px;
			}
			.trv-list-content{
				display: flex;
				@include breakpoint-480{
					display: block;
				}
				.duration{
					text-align: center;
					.media{
						width: 46px;
						height: 46px;
						background-color: $clr-yellow;
						border-radius: 50px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 5px;
						@include breakpoint-480{
							margin: 0px auto;
						}
						.green-bg{
							width: 38px;
							height: 38px;
							background-color: $clr-primary;
							border-radius: 50px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: $heading-font;
							font-size: 22px;
							font-weight: 700;
							color: $clr-white;
						}
					}
					.day{
						font-family: $font-style2;
						font-size: 14px;
						font-weight: 600;
						color: $clr-primary;
						display: inline-block;
						@include breakpoint-480{
							margin: 10px 0px;
						}
					}
				}
				.info{
					width: calc(100% - 46px);
					padding-left: 50px;
					padding-right: 20px;
					@include breakpoint-480{
						width: 100%;
						padding: 0px;
						text-align: center;
					}
					.trv-title{
						font-family: $heading-font;
						font-size: 24px;
						font-weight: 500;
						color: $clr-primary;
						line-height: 1.2;
						margin-bottom: 15px;
						@include breakpoint-768{
							font-size: 20px;
						}
					}
					p{
						font-family: $font-style2;
						font-size: 16px;
						font-weight: 400;
						color: $clr-primary;
						line-height: 1.4;
						&:last-child{
							margin-bottom: 0px !important;
						}
					}
				}
			}
		}
	}
}

.trv-sep-rating{
	margin-bottom: 20px;
	span{
	font-family: $heading-font;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: $clr-primary;
	margin-right: 10px;
	}
	i{
		color: $clr-yellow;
		font-size: 15px;
	}
}

.trv-right-tp-part{
	display: flex;
	align-items: start;
	justify-content: space-between;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(6, 97, 104, 0.2);
	padding-bottom: 20px;
	margin-bottom: 30px;
	.tp-list{
		padding: 0px;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 0px;
		@include breakpoint-1199{
			width: 100%;
		}
		li{
			font-family: $font-style2;
			font-size: 14px;
			font-weight: 400;
			color: #545454;
			line-height: 1.4;
			margin-right: 40px;
			margin-bottom: 10px;
			@include breakpoint-1199{
				width: 31%;
				margin-right: 2%;
			}
			@include breakpoint-767{
				width: 48%;
				
			}
			.price{
				font-family: $heading-font;
				font-size: 16px;
				font-weight: 400;
				color: $clr-primary;
				line-height: 1.4;
				.number{
					font-family: $font-style2;
					font-size: 28px;
					font-weight: 900;
					color: $clr-yellow;
					line-height: 1.2;
				}
			}
			span{
				font-family: $heading-font;
				font-size: 20px;
				font-weight: 700;
				color: $clr-primary;
				line-height: 1.2;
				display: block;
				margin-bottom: 5px;
			}
		}
	}
	.site-btn{
		background-color: $clr-green;
		border-radius: 50px;
		padding: 15px 30px;
		font-family: $font-style2;
		font-size: 18px;
		font-weight: 500;
		color: $clr-black;
		display: inline-block;
	}
}
/** - Tour Guide Carousal */
.trv-tour-guide-car-row{
	max-width: 1626px;
	margin: 0px auto;
	.trv-guide-bx1{
		margin: 0px 15px;
	}
}

/** - Guide Srvice Detils */
.trv-srvice-rows-st1{
	border: 6px solid rgba(41, 137, 145, 0.2);
	border-radius: 30px;
	background-color: $clr-white;
	ul{
		margin-bottom: 0px;
		li{
			display: flex;
			flex-wrap: nowrap;
			border-bottom: 1px solid rgba(6, 97, 104, 0.2);
			@include breakpoint-480{
				display: block;
			}
			.trv-s-title{
				min-width: 195px;
				width: 195px;
				padding:15px 30px;
				@include breakpoint-480{
					width: 100%;
					padding: 15px 20px 0px 20px;
				}
				span{
					display: block;
					font-size: 20px;
					font-family: $heading-font;
					color: $clr-primary;
					font-weight: 500;
					@include breakpoint-768{
						font-size: 18px;
					}
				}
			}
			.trv-s-content{
				flex: 1;
				padding:15px 20px;
				font-size: 16px;
				border-left: 1px solid rgba(6, 97, 104, 0.2);
				p:last-child{
					margin-bottom: 0px;
				}
				@include breakpoint-480{
					width: 100%;
					padding: 10px 20px 15px 20px;
					border-left: none;
				}
			}

			&:first-child{
				.trv-s-title{
					padding-top: 40px;
					@include breakpoint-480{
						padding-top: 10px;
					}
				}
				.trv-s-content{
					padding-top: 40px;
					@include breakpoint-480{
						padding-top: 10px;
					}
				}
			}
			&:last-child{
				border-bottom: 0px;
				.trv-s-title{
					padding-bottom: 40px;
					@include breakpoint-480{
						padding-bottom: 0px;
					}
				}
			}
		}

	}
}

.trv-srvice-rows-st2-wrap{
	.trv-srvice-rows-st2:last-child{
		margin-bottom: 0px;
	}
}
.trv-srvice-rows-st2{
	border-radius: 30px;
	background-color: $clr-light-yellow;
	ul{
		margin-bottom: 0px;
		li{
			display: flex;
			flex-wrap: nowrap;
			border-bottom: 1px solid rgba(6, 97, 104, 0.2);
			@include breakpoint-480{
				display: block;
			}
			.trv-s-title{
				min-width: 195px;
				width: 195px;
				padding:15px 30px;
				@include breakpoint-480{
					padding: 15px 20px 0px 30px;
				}
				span{
					display: block;
					font-size: 20px;
					font-family: $heading-font;
					color: $clr-primary;
					font-weight: 500;
					@include breakpoint-768{
						font-size: 18px;
					}
				}
			}
			.trv-s-content{
				flex: 1;
				padding:15px 20px;
				font-size: 16px;
				border-left: 1px solid rgba(6, 97, 104, 0.2);
				p:last-child{
					margin-bottom: 0px;
				}
				@include breakpoint-480{
					border: none;
					padding: 10px 20px 15px 30px;
				}
			}


			&:last-child{
				border-bottom: 0px;
				.trv-s-title{
					padding-bottom: 30px;
				}
				.trv-s-content{
					padding-bottom: 30px;
				}
			}
		}
		.rv-srvice-rows-head{
			font-size: 24px;
			font-weight: 600;
			font-family: $heading-font;
			padding: 40px 30px 10px 30px;
			width: 100%;
		}
	}
}

/** - Faq Media Section */
.trv-faq-left-media-wrap{
	position: relative;
	.trv-f-pic{
		text-align: left;
		margin-left: 40px;
		@include breakpoint-991{
			text-align: center;
			margin-left: 0px;
		}
	}
	.trv-f-quote{
		padding: 20px;
		position: absolute;
		bottom: 0px;
		left: 0;
		background: rgba(255, 255, 255, 0.56);
		border: 5px solid rgba(255, 170, 13, 0.32);
		box-shadow: 0px 16px 24.7px rgba(6, 97, 104, 0.3);
		backdrop-filter: blur(10px);
		border-radius: 30px;
		display: flex;
		align-items: center;
		@include breakpoint-991{
			position: inherit;
		}
		.trv-f-quote-icon{
			width: 48px;
			min-width: 48px;
			margin-right: 30px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			i{
				font-size: 74px;
				line-height: 0.75;
				padding-top: 5px;
			}
		}	
		
		.trv-title{
			font-family: $heading-font;
			font-size: 28px;
			font-weight: 500;
			color: $clr-primary;
			margin-bottom: 0px;
			@include breakpoint-420{
				font-size: 22px;
			}
		}
	}
}

/** - Contact Form two Wrap */
.trv-contact2-form-wrap{
	padding: 120px 20px 120px 120px;
	background-size: cover;
	@include breakpoint-1024{
		padding: 50px 20px 50px 120px;
	}
	@include breakpoint-991{
		padding: 50px;
	}
	@include breakpoint-420{
		padding: 50px 20px;
	}
	.trv-contact2-right-part{
		.trv-form2{
			padding: 60px 50px;
			border-radius: 30px;
			background: rgba(0, 0, 0, 0.22);
			border: 1px solid rgba(255, 255, 255, 0.6);
			backdrop-filter: blur(5px);
			@include breakpoint-991{
				padding: 20px;
			}
			.form-group{
				margin-bottom: 20px;
				.form-control{
					display: block;
					width: 100%;
					height: 74px;
					border-radius: 50px;
					border: 1px solid rgba(41, 137, 145, 0.22);
					padding: 20px 40px;
					&::placeholder{
						font-family: $font-style2;
						font-size: 16px;
						font-weight: 400;
						color: $common-font-color;
					}
				}
				textarea.form-control{
					width: 100%;
					height: 168px;
					padding-left: 40px;
					padding-top: 30px;
					border-radius: 30px;
					border: 1px solid rgba(41, 137, 145, 0.22);
					margin-bottom: 30px;
					resize: none;
					&::placeholder{
						font-family: $font-style2;
						font-size: 16px;
						font-weight: 400;
						color: $common-font-color;
					}
				}
			}
		}
	}
}


/** - Gallery Rev SLider */
.trv-rev-gallary-wrap{
	background-color: $clr-white;
}
.trv-gallery-rev-st1{
	position: relative;
	margin-bottom: 30px;
	overflow: hidden;
	border-radius: 30px;
	@include breakpoint-575{
		border-radius: 15px;
	}
	.trv-gallery-rev-st1-media{
		img{
			display: block;
			height:250px;
			object-fit: cover;
			object-position: bottom;
			@include breakpoint-1024{
				height: 190px;
			}
			@include breakpoint-768{
				height: 160px;
			}
			@include breakpoint-575{
				height: 100px;
				width: 180px;
			}
		}
	}
}

.trv-gallery-rev-st2{
	position: relative;
	margin-bottom: 0px;
	overflow: hidden;
	border-radius: 10px;
	.trv-gallery-rev-st2-media{
		background-color: $clr-primary;
		img{
			display: block;
			height:125px;
			width: 100%;
			object-fit: cover;
			object-position: bottom;
			transition: $transition;
			&:hover{
				opacity: 0.5;
			}
		}
	}
}
/** - Contact Us Page */
.trv-contact-us-wrap{
	padding:90px 20px;
	@include breakpoint-1024{
		padding:50px 20px;
	}
	.trv-contact-us-mid{
		max-width: 1740px;
		margin: 0px auto;
		background-color: $clr-white;
		border-radius: 60px;
		padding: 60px;
		box-shadow: 0px 4px 80px rgba(6, 97, 104, 0.28);
		position: relative;
		@include breakpoint-1024{
			padding:20px;
		}
	}
	.trv-contact-us-detail-wrap{
		position: relative;
		z-index: 1;
	}
	.trv-contact-us-detail{
		padding: 138px 0px 0px 0px;
		max-width: 450px;
		margin-left: 12px;
		@include breakpoint-1200{
			max-width: 100%;
			padding: 50px 30px 0px 30px;
			margin-left: 0px;
		}
		@include breakpoint-575{
			padding: 50px 0px 0px 0px;
		}
	}

	.trv-con-media{
		padding-top: 50px;
		@include breakpoint-991{
			padding-top: 0px;
		}
		@include breakpoint-400{
			text-align: center;
		}
		.trv-con-title{
			font-family: $font-style3;
			font-size: 48px;
			color: $clr-primary;
			margin-bottom: 0px;
			span{
				color: $clr-yellow;
			}
			@include breakpoint-768{
				font-size: 40px;
			}
			@include breakpoint-460{
				font-size: 24px;
			}
		}
		
	}
	.trv-con-pic{
		position: absolute;
		bottom:-20px;
		right: -20px;
		width: 260px;
		z-index: -1;
		@include breakpoint-1600{
			right: -40px;
			width: 200px;
		}
		@include breakpoint-1200{
			display: none;
		}
	}
}

.trv-contact-list{
	list-style: none;
	margin-bottom: 0px;
	li{
		margin-bottom: 30px;
		.trv-contact-info{
			display: flex;
			align-items: center;
			@include breakpoint-400{
				display: block;
				text-align: center;
			}
			.media{
				background-color: #45869D;
				width: 100px;
				height: 100px;
				border-radius: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				@include breakpoint-400{
					margin: 0px auto 20px;
				}
				.white-circle{
					background-color: $clr-white;
					box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
					width: 70px;
					height: 70px;
					border-radius: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					i{
						font-size: 34px;
						color: #53A4C0;
					}
				}
			}
			.info{
				width: calc(100% - 100px);
				padding-left: 30px;
				@include breakpoint-400{
					width: 100%;
					padding-left: 0px;
				}
				.title{
					font-family: $font-style2;
					font-size: 18px;
					font-weight: 400;
					color: $clr-primary;
					line-height: 1.4;
				}
				.text{
					font-family: $heading-font;
					font-size: 28px;
					font-weight: 600;
					color: $clr-primary;
					line-height: 1.2;
					margin-bottom: 0px;
					@include breakpoint-768{
						font-size: 20px;
					}
				}
			}
			&.icon-2{
				.media{
					background-color: #CE8594;
					i{
						color: #CE8594;
					}
				}
			}
			&.icon-3{
				.media{
					background-color: #047881;
					i{
						color: $clr-primary
					}
				}
			}
		}
	}

}
/** - Google Map */
.google-map{
	width: 100%;height: 600px;
	margin-bottom: 60px;
	@include breakpoint-767{
		height: 360px;
	}
	iframe{
		width: 100%;
		border-radius: 40px;
		@include breakpoint-767{
			height: 360px;
		}
	}
}

.trv-google-map{
	width: 100%;
	height: 460px;
	@include breakpoint-575{
		height: 260px;
	}
	iframe{
		width: 100%;
		border-radius: 30px;
		@include breakpoint-575{
			height: 260px;
		}
	}
}

/** - Blog List STyle */
.trv-blog-list-st{
	text-align: center;
	.trv-media{
		border-radius: 30px;
		overflow: hidden;
		position: relative;
		img{
			border-radius: 30px;
			object-fit: cover;
			object-position: center;
			height: 430px;
			@include breakpoint-767{
				height: 290px;
			}  
		}
	}
	.trv-info{
		background-color: $clr-white;
		border-radius: 30px;
		border: 1px solid rgba(6, 97, 104, 0.2);
		padding: 40px;
		display: inline-block;
		text-align: left;
		margin-top: -100px;
		margin-left: 40px;
		margin-right: 40px;
		position: relative;
		z-index: 1; 
		@include breakpoint-767{
			margin: 30px 0px 0px 0px;
			padding: 30px;
		}  
		@include breakpoint-575{
			padding: 20px;
		}                                         
		
		.trv-title{
			font-family: $heading-font;
			font-size: 28px;
			font-weight: 500;
			line-height: 1.2;
			margin-bottom: 20px;
			a{
				color: $clr-primary;
				transition: $transition;
				&:hover{
					color: $clr-yellow;
				}
			}
			@include breakpoint-768{
				font-size: 22px;
			} 
		}
		p{
			font-family: $font-style2;
			font-size: 16px;
			font-weight: 400;
			color: $common-font-color;
			line-height: 1.4;
			margin-bottom: 30px;
		}
	}
	.blog-mp4-vide{
		object-fit: cover;
		width: 100%;
		height: 480px;
		margin: 0;
		padding: 0px;
		display: block;
		@include breakpoint-767{
		height: 290px;
		}
		@include breakpoint-575{
			height:309px;
		}
		@include breakpoint-420{
			height:307px;
		}
		@include breakpoint-360{
			height:260px;
		}
	}
}

.trv-post-meta{
	margin-bottom: 20px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	li{
		font-family: $heading-font;
		font-size: 18px;
		font-weight: 400;
		color: $clr-primary;
		line-height: 1.2;
		position: relative;
		padding: 0px 20px 0px 0px;
		&:after{
			content: '/';
			color: $clr-yellow;
			position: absolute;
			right: 5px;
			top: 0px;
			font-size: 20px;
		}
		&:first-child{
			padding-left: 0px;
		}
		&:last-child{
			padding-right: 0px;
			&:after{
				display: none;
			}
		}

		
	}
	.post-author{
		a{
			color: $clr-primary;
			transition: $transition;
			&:hover{
				color: $clr-yellow;
			}
		}
	}
}

.trv-blog-d-column-wrap{
	display: flex; 
	align-items: center; 
	justify-content: center;
	margin: 40px 0px 10px 0px;
	.trv-blog-d-column-bx{
		border-radius: 30px;
		overflow: hidden;
		img{
			width: 100%;
		}
	}
}

.trv-detail-media{
	border-radius: 30px;
	overflow: hidden;
	position: relative;
	margin-bottom: 40px;
	img{
		border-radius: 30px;
		object-fit: cover;
		object-position: center;
		height: 430px;
		width: 100%;
	}
}

.trv-inr-vid-bx{
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
  img{
	object-fit: cover;
	object-position: center;
	height: 460px;
	border-radius: 30px;
	width: 100%;
	@include breakpoint-575{
		height: 260px;
	}
  }
}

/** - Side Bar Elements */
.twm-sidebar-ele-filter{
	margin: 0px 0px 30px 0px;
	.section-head-small{
		position: relative;
		padding-left: 16px;
		display: table;
		font-size: 24px;
		font-weight: 600;
		font-family: $heading-font;
		padding: 5px 20px;
		background: linear-gradient(90deg, rgba(255, 170, 13, 0.1) 0%, rgba(6, 97, 104, 0.2) 100%);
		border-left: 4px solid $clr-yellow;
		margin-bottom: 0px;
		@include breakpoint-420{
			font-size: 24px;
		}
	}
	.trv-fliter-bx{
		padding-bottom: 30px;
		margin-bottom: 30px;
		border-bottom: 1px solid rgba(6, 97, 104, 0.2);
	}
	.form-group{
		label {
		padding-bottom: 10px;
	  }
	}
	
	ul{
		list-style: none;
		li{
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			margin-bottom: 10px;
			font-weight: 600;
			color: $clr-primary;
			font-family: $heading-font;
		}
	}

}
.trv-advertisment-bx{
	margin-top: 30px;
	text-align: center;
}
.twm-side-filter-form{
	padding: 0px;
	.form-group{
		margin-bottom: 10px;
		background-color: $clr-white;
		border-radius: 100px;
		padding:15px 30px 10px 30px;
		border: 1px solid rgba(6, 97, 104, 0.2);
		height: 80px;
		@include breakpoint-420{
			border-radius: 14px;
			padding: 8px 20px 0px 20px;
			height: 64px;
		}
		label{
			margin-bottom: 10px;
		}
	}
	.bootstrap-select > .dropdown-toggle{
		padding-left: 0px;
		padding-right: 0px;
		font-size: 14px;
		color: #545454;
	}
}
.search-bx-filter{
	position: relative;
	margin-bottom: 20px;
	.form-control{
		background-color: $clr-white;
		color: $clr-primary;
		border: 1px solid rgba(6, 97, 104, 0.2);
		border-radius: 30px !important;
		height: 56px;
		font-size: 16px;
		padding: 20px 50px 20px 30px;
		&::placeholder{
			color: #b9b9b9;
		}
		&:focus{
			box-shadow: none !important;
		}
	}
	.input-group-btn{
		position: absolute;
		right: 0px;
		z-index: 10;
		.btn{
			background-color: transparent;
			color: $clr-primary;
			border-radius: 0;
			height: 56px;
			padding: 0 20px;
			transition: $transition;
			&:hover{
				color: $clr-yellow;
			}
		}
	}
	input:focus{
		box-shadow: none;
		outline: none;
	}
}
.twm-min-max-number{
	display: flex;
	justify-content: space-between;
	.twm-min-number,
	.twm-max-number{
		background-color: $clr-white;
		width: 100px;
		height: 56px;
		border-radius: 5px;
		input:focus{
			border-radius: none;
			outline: none;
		}
		label{
			margin: 0px;
			padding: 0px 10px;
			display: block;
			text-align: left;
			opacity: 0.5;
		}
	}
	.twm-min-number-bx{
		padding: 3px 10px;
		display: flex;
		align-items: center;
		em{
			font-style: normal;
			color: $clr-primary;
		}
	}
	input[type=number] {
		width: 100%;
		border: none;
		text-align: left;
		font-size: 14px;
		background: none;
		// -webkit-appearance: textfield;
	}
}

.trv-link-text{
	font-family: $heading-font;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 18px;
	color: $clr-primary;
	background: none;
	border: none;
	transition: $transition;
	&:hover{
		color: $clr-yellow;
	}
}

/** - Search Style 2 */
.twm-side-filter-form{
	.trv-fltr-select{
		width: 100%;
		
		label{
			padding-bottom: 0px;
			font-family: $heading-font;
			font-weight: 700;
			font-size: 20px;
			line-height: 1;
			color: $clr-primary;
			margin-bottom: 0px;
			@include breakpoint-420{
				font-size: 16px;
			}
		}
		.form-control{
			background-color: transparent;
			height: 38px;
			cursor: pointer;
			padding: 0px;
			font-family:$font-style2;
			font-weight: 400;
			font-size: 14px;
			line-height: 1.2;
			color: #545454;
			background-position: right -1px;
			@include breakpoint-420{
				height: 30px;
			}
			&:focus{
				box-shadow: none;
			}
		}
	}
	.btn-quantity2{
		display: block;
		max-width: inherit;
  		width: auto;
		.bootstrap-touchspin{
			.input-group-btn-vertical {
				position: relative;
				white-space: nowrap;
				width: 1%;
				vertical-align: middle;
				display: flex;
				top: -15px;
				right: 15px;
			}
		} 
	}
	.input-group-text{
		background-color: transparent;
		border: none;
		color: #9d9d9d;
		padding: 0;
		margin-top: 4px;
		margin-right: 4px;
	}
	input::placeholder{
		color: #545454;
	}
	.trv-search-st1-search-btn{
		.srch-btn{
			font-size: 28px;
			color: $clr-white;
			border: none;
			border-radius: 100px;
			width: 100%;
			height: 60px;
			background-color: $clr-primary;
			transition: $transition;
			&:hover{
				color: $clr-primary;
				background-color: $clr-yellow;
			}
		}
	}

	.form-check-input{
		width: 20px;
		height: 20px;
	}
	.form-check-input:checked {
		background-color: $clr-primary;
		border-color: $clr-primary;
	}
	.form-check{
		padding-left: 40px;
		.form-check-input{
			margin-left: -40px;
		}
		
	} 
}
.trv-rat-with-review{
	display: flex;
	@include breakpoint-1199{
		display: block;
	}
	.form-check-label{
		padding-left: 20px;
		@include breakpoint-1199{
			padding-left: 0px;
		}
	}
	.rating{
		padding: 0px 10px;
		color: $clr-yellow;
		@include breakpoint-1199{
			display: inline-flex;
		}
	}
	.trv-review-count{
		font-size: 14px;
		font-family: $heading-font;
		color: #787878;
		font-weight: normal;
		b{
			font-weight: normal;
			color: $clr-primary;
			padding-right: 6px;

		}
	}
}

/** - Bootstrap Select CSS */
.bootstrap-select>.dropdown-toggle{
	border: none;
	background-color: transparent;
	&:focus{
		outline: none !important;
	}
	&:checked,
	&.active, 
	&:active{
		background: none !important;

	}

	&:after {
    	margin-top: -20px;
		content: '\F282';
		font-family: "bootstrap-icons";
		border: none;
	}
}
.dropup .dropdown-toggle::after{
	margin-top: -20px;
	content: '\F286';
	font-family: "bootstrap-icons";
	border: none;
}
.bootstrap-datetimepicker-widget{
	@include breakpoint-360{
		width: 250px !important;
	}
	.datepicker,
	.timepicker{
		width: 100% !important;
		@include breakpoint-360{
			width: 250px !important;
		}
	}
}

.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/*Marquee 1*/
.marquee {	position: relative;
	overflow: hidden;
	img {
		animation: marquee 30s linear infinite;
	}
}

@keyframes marquee {
  0% {
    transform: translateX(-40vw);
  }
  100% {
    transform: translateX(100vw);
  }
}
/*Marquee 2-1*/
.marquee-hm2-1 {
	position: relative;
	overflow: hidden;
	img {
		animation: marquee-hm2-1 30s linear infinite;
		@include breakpoint-768{
			animation: marquee-hm2-1 15s linear infinite;	
		}
	}
}

@keyframes marquee-hm2-1 {
  0% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(100vw);
  }
}

/*Marquee 2-2*/
.marquee-hm2-2 {
	position: relative;
	overflow: hidden;
	img {
		animation: marquee-hm2-2 40s linear infinite;
		@include breakpoint-768{
			animation: marquee-hm2-2 20s linear infinite;	
		}
	}
}

@keyframes marquee-hm2-2 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100vw);
  }
}

/*Marquee 1-1*/
.marquee-hm1-cloud1 {
	position: relative;
	overflow: hidden;
	img {
		animation: marquee-hm1-cloud1 60s linear infinite;
		@include breakpoint-768{
			animation: marquee-hm1-cloud2 20s linear infinite;
		}
	}
}

@keyframes marquee-hm1-cloud1{
  0% {
    transform: translateX(-10vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

/*Marquee 1-1*/
.marquee-hm1-cloud2 {
	position: relative;
	overflow: hidden;
	img {
		animation: marquee-hm1-cloud2 30s linear infinite;
		@include breakpoint-768{
			animation: marquee-hm1-cloud2 10s linear infinite;
		}
	}
}

@keyframes marquee-hm1-cloud2{
  0% {
    transform: translateX(-20vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

/*Marquee 3*/
.marquee-car {
	position: relative;
	overflow: hidden;
	.trv-animated-car {
		animation: marquee-car 40s linear infinite;
		@include breakpoint-768{
			animation: marquee-car 10s linear infinite;	
		}
	}
}

@keyframes marquee-car {
  0% {
    transform: translateX(-400px);
  }
  100% {
    transform: translateX(100vw);
  }
}


/* 25 Nov Css----------------------*/

/*Coming Soon Pages*/
.trv-comingsoon-wrap{
	background-size: cover;
	height: 100%;
	padding: 60px 0px 120px;
	text-align: center;
	overflow: hidden;
	position: relative;
	&:after{
		content: '';
		background-image: url(../images/commingsoon-pic.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		position: absolute;
		animation: zoom-in-zoom-out 15s ease-in-out infinite;
	}
	@include breakpoint-1366{
		padding:30px 0px 50px;
	}
	@include breakpoint-991{
		padding: 60px 0px 50px;
	}
	.trc-comi-logo{
		width: 200px;
		padding: 0px 0px 60px 60px;
		position: relative;
  		z-index: 3;
		@include breakpoint-991{
			padding: 30px 30px 20px 30px;
			margin: 0px auto;
			background: #000;
			border-radius: 20px 20px 0px 0px;
		}
	}
	.trv-comingsoon-Content{
		max-width: 1180px;
		border-radius: 20px;
		padding: 60px 100px;
		background-color: rgba(0,0,0,0.15);
		color: $clr-white;
		margin: 0px auto;
		-webkit-backdrop-filter: blur(5px);
  		backdrop-filter: blur(5px);
		position: relative;
		z-index: 5;
		@include breakpoint-1366{
			padding: 40px;
		}
		@include breakpoint-420{
			padding: 40px 20px;
		}
	}
	.trv-comism-title{
		color: $clr-white;
		font-family: $font-style2;
		font-size: 38px;
		font-weight: 300;
		margin-bottom: 0px;
		position: relative;
		display: inline-flex;
		@include breakpoint-1366{
			font-size: 28px;
		}
		@include breakpoint-575{
			font-size: 20px;
		}
		&:after{
			content: '';
			width: 50px;
			height: 2px;
			background-color: $clr-yellow;
			position: absolute;
			right: -80px;
			top: 50%;
			transform: translateY(-50%);
			@include breakpoint-575{
				display: none;
			}
		}
	}
	.trv-comilg-title{
		color: $clr-white;
		font-family: $font-style2;
		font-size: 120px;
		font-weight: 800;
		text-transform: uppercase;
		margin-bottom: 0px;
		@include breakpoint-1366{
			font-size: 60px;
		}
		@include breakpoint-991{
			font-size: 48px;
			margin: 10px 0px;
		}
		@include breakpoint-575{
			font-size: 28px;
		}
	}
	.trv-comipara-text{
		font-size: 18px;
		@include breakpoint-575{
			font-size: 14px;
		}
	}

	.copyrights-text{
		margin: 20px 0px 0px 0px;
	}

	.social-icons{
		@include breakpoint-991{
			margin-top: 20px;
		}
	}
	
}

/* TIMER STYLES */
.timeContainer {
	z-index: 2;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
	@include breakpoint-1366{
		margin-bottom: 20px;
	}
	.wrapper {
		width: 800px;
		padding: 20px;
		max-height: 400px;
		display: flex;
		justify-content: space-around;
		gap: 20px;
		@include breakpoint-575{
			padding: 20px 0px;
			gap: 5px;
		}
		div {
			text-align: center;
			width: 24%;
			height: 150px;
			border-radius: 12px;
			box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3) inset;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			@include breakpoint-1366{
				height: 100px;
			}
			@include breakpoint-575{
				font-size: 12px;
			}
			@include breakpoint-360{
				box-shadow:none;
				height: auto;
			}
			h2 {
				font-size: 70px;
				color: $clr-white;
				font-size: 50px;
				margin-bottom: 0px;
				@include breakpoint-991{
					font-size: 28px;
				}
			}
		}
	}
}

/** - Newsletter form */
.ftr-nw-form-cs-wrap{
	padding: 6px;
	background-color: #DBEEEE;
	border-radius: 50px;
	max-width: 600px;
	height: 80px;
	margin: 0px auto;
	@include breakpoint-575{
		height: auto;
		border-radius: 20px;
		background: none;
		padding: 0px;
	}
}
.ftr-nw-form-cs{
	display: flex;
	position: relative;
	@include breakpoint-575{
		display: block;
		text-align: center;
	}
	.form-control{
		height: 68px;
		border: 0px;
		padding: 10px 200px 10px 20px;
		border-radius: 50px;
		@include breakpoint-575{
			padding:20px;
			height: 60px;
		}
		&:focus{
			background: none;
		}

		&::placeholder{
			font-size: 16px;
			font-weight: 400;
			color: $clr-primary;
			font-family: $heading-font;
		}
	}
	.ftr-nw-subcribe-btn{
		font-size: 18px;
		color: $clr-white;
		border: none;
		border-radius: 50px;
		padding: 0px 30px;
		height: 60px;
		background-color: $clr-primary;
		position: absolute;
		top: 5px;
		right: 5px;
		transition: $transition;
		&:hover{
			color: $clr-primary;
			background-color: $clr-yellow;
		}
		@include breakpoint-575{
			position: static;
			width: 100%;
			margin-top: 10px;
		}
	}
}

/*Under Maintinance Pages*/
.trv-under-main-wrap{
	background-size: cover;
	text-align: center;
	@include breakpoint-1600{
		background-position: right bottom;
	}
	@include breakpoint-991{
		padding: 80px 0px;
	}
	.container{
		display: flex; 
		align-items: center; 
		justify-content: center; 
		height: 960px;
		@include breakpoint-1366{
			height: 768px;
		}
		@include breakpoint-991{
			height: auto;
		}
	}
	.trc-comi-logo{
		width: 148px;
		padding: 0px 0px 30px 0px;
		margin: 0px auto;
	}
	.trv-under-main-Content{
		max-width: 970px;
		border-radius: 20px;
		padding: 60px 100px;
		background-color: rgba(6, 97, 104, 0.70);
		color: $clr-white;
		margin: 0px auto;
		-webkit-backdrop-filter: blur(10px);
  		backdrop-filter: blur(10px);
		@include breakpoint-1366{
			padding: 40px;
		}
		@include breakpoint-420{
			padding: 40px 20px;
		}
	}
	.trv-under-mainsm-title{
		color: $clr-white;
		font-family: $font-style2;
		font-size: 28px;
		font-weight: 300;
		margin-bottom: 0px;
		position: relative;
		display: inline-flex;
		@include breakpoint-1366{
			font-size: 28px;
		}
		@include breakpoint-575{
			font-size: 20px;
		}
	}
	.trv-under-mainlg-title{
		color: $clr-white;
		font-family: $font-style2;
		font-size: 74px;
		font-weight: 800;
		text-transform: uppercase;
		margin: 20px 0px;
		@include breakpoint-1366{
			font-size: 60px;
		}
		@include breakpoint-991{
			font-size: 48px;
			margin: 10px 0px;
		}
		@include breakpoint-575{
			font-size: 28px;
		}
	}
	.trv-under-mainpara-text{
		font-size: 18px;
		margin-bottom: 30px;
		@include breakpoint-575{
			font-size: 14px;
		}
	}

	.copyrights-text{
		margin: 20px 0px 0px 0px;
	}

	.social-icons{
		margin-top: 30px;
		@include breakpoint-991{
			margin-top: 20px;
		}
	}
	
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}


/*Marquee coming soon*/
.marquee-cs-cloud {
  width: 100%;
  position: absolute;
  top: 100px;
  left: 0px;
  z-index: 1;
}
.marquee-cs {	position: relative;
	overflow: hidden;
	img {
		animation: marquee-cs  30s linear infinite;
	}
}

@keyframes marquee-cs {
  0% {
    transform: translateX(-90vw);
  }
  100% {
    transform: translateX(200%);
  }
}




/*----------------------------------------------------------------------
	Update Pages CSS Start 
------------------------------------------------------------------------*/

.trv-tour-compare-signel{
	padding: 30px;
	background-color: $clr-white;
	border-radius: 30px;
}
.trv-tour-compare-signel-left{
	p{
		font-size: 16px;
	}
}

.trv-tour-compare-signel-right{
	.tp-list{
		padding: 0px;
		list-style: none;
		display: block;
		flex-wrap: wrap;
		margin-bottom: 0px;
		@include breakpoint-1199{
			width: 100%;
		}
		li{
			font-family: $font-style2;
			font-size: 14px;
			font-weight: 400;
			color: #545454;
			line-height: 1.4;
			margin-bottom: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(6, 97, 104, 0.20);
			padding:0px 20px 10px 20px;
			@include breakpoint-575{
				padding:0px 0px 10px 0px;
			}
			.price{
				font-family: $heading-font;
				font-size: 16px;
				font-weight: 400;
				color: $clr-primary;
				line-height: 1.4;
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				.number{
					font-family: $font-style2;
					font-size: 28px;
					font-weight: 900;
					color: $clr-yellow;
					line-height: 1.2;
					@include breakpoint-575{
						font-size: 20px;
					}
				}
			}
			span{
				font-family: $heading-font;
				font-size: 20px;
				font-weight: 700;
				color: $clr-primary;
				line-height: 1.2;
				display: block;
				@include breakpoint-575{
					font-size: 18px;
				}
			}
		}
	}
	.site-btn{
		background-color: $clr-green;
		border-radius: 50px;
		padding: 15px 30px;
		font-family: $font-style2;
		font-size: 18px;
		font-weight: 500;
		color: $clr-black;
		display: inline-block;
	}
}

.trv-tour-compare-signel-carousal{
	margin-bottom: 25px;
	.trv-tour-compare-signel-slider{
		overflow: hidden;
		border-radius: 30px;
		.trv_d-slider-media{
			border-radius: 30px;
			overflow: hidden;
			max-height: 432px;
		}
		img{
			border-radius: 30px;
			width: 100%;
		}
	}
}

/*Tour Compare Section*/
.trv-tour-compare-head{
	max-width: 640px;
	margin-bottom: 60px;
	.trv-title{
		font-weight: 500;
		font-size: 36px;
		line-height:1.2;
		color: $clr-primary;
		@include breakpoint-768{
			font-size: 28px;
		}
	}
	p{font-size: 16px;}
}

.trv-tour-compare-wrap{
	padding-bottom: 120px;
	@include breakpoint-1024{
		padding-bottom: 50px;
	}
}

.trv-tour-compare-section{
	background-color: $clr-white;
	.trv-tour-com-title{
		font-family: $heading-font;
		font-weight: 500;
		font-size: 20px;
		color: $clr-primary;
		width: 210px;
		@include breakpoint-575{
			width: 90px;
			font-size: 14px;
		}
	}
	.trv-tour-com-media{
		width: 330px;
		margin: 15px 0px;
		@include breakpoint-575{
			width: 180px;
			margin: 5px 0px;
		}
		img{
			width: 100%;
			border-radius: 20px;
		}
	}
	.trv-tour-com-location-info{
		.trv-title{
			margin-bottom: 20px;
			font-size: 28px;
			font-weight: 500;
			@include breakpoint-1199{
				font-size: 22px;
			}
			@include breakpoint-575{
				font-size: 18px;
			}
			a{
				color: $clr-primary
			}
		}
		p{
			font-size: 16px;
			@include breakpoint-575{
				font-size: 13px;
			}
		}
		.site-button{
			margin: 15px 0px;
			
		}
	}
	.trv-tour-com-price{
		font-weight: 900;
		font-size: 28px;
		line-height: 34px;
		color: $clr-yellow;
		@include breakpoint-575{
			font-size: 20px;
		}
	}

	/*Table main*/
	.table-wrapper {
		overflow-x: auto;
  		overflow-y: hidden;
		cursor: grab;
		user-select: none; 
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.table-wrapper:active {
		cursor: grabbing;
	}
	.table-wrapper::-webkit-scrollbar {
		height: 8px;
	}
	table {
		border-spacing: 0;
	}
	th, td {
		padding:15px 30px;
		border: 1px solid  rgba(6, 97, 104, 0.20);
		@include breakpoint-575{
			padding:10px 15px;
		}
		@include breakpoint-360{
			padding:10px;
		}
		
	}
	th {
      cursor: grab;
    }
    th:active {
      cursor: grabbing;
    }

	tr:last-child td {
		border-bottom: none;
	}


	tr.sticky {
		position: sticky;
		top: 0;
		z-index: 1;
		background: $clr-white;
		
	}

	th.sticky,
	td.sticky {
		position: sticky;
		left: 0;
		background: $clr-white;
		z-index: 1;
	}

	th.sticky::after,
	td.sticky::after {
	content: "";
		position: absolute;
		right: -6px;
		top: 0;
		bottom: -1px;
		width: 5px;
		border-left: 1px solid  rgba(6, 97, 104, 0.20);
		background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);
	}

	th.sticky::before,
	td.sticky::before {
	content: "";
		position: absolute;
		left: -6px;
		top: 0;
		bottom: -1px;
		width: 5px;
		border-right: 1px solid  rgba(6, 97, 104, 0.20);
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
	}

}

/*______Testimonial Detail Carousal______*/
.trv-testi-stories-wrap{
	position: relative;
}
.trv-testi-stories-section{
	border-radius: 30px;
	padding: 30px;
	background-color: $clr-white;
	@include breakpoint-1024{
		margin-bottom: 30px;
	}
}
.trv-testi-stories-content{
	display: flex;
	align-items: center;
	background-image: url(../images/leaf-bdr.png);
	background-repeat: repeat-x;
	background-size: 100px;
	padding: 80px 0px 120px 0px;
	background-position: bottom;
	@include breakpoint-1024{
		padding: 30px 0px 80px 0px;
	}
	&:nth-child(even){
		flex-direction:row-reverse;
	}
	&:first-child{
		padding-top: 0px;
	}
	&:last-child{
		padding-bottom: 0px;
		background-image: none;
	}
}

.trv-testi-stories-images{

	.swiper-container {
		overflow: hidden;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.trv-gl-full{
		position: relative;
		width: 100%;
		.swiper-slide{
			.car-d-main{
				position: relative;
				z-index: 1;
				border-radius: 30px;
				overflow: hidden;
				width: 100%;
				img{
					width: 100%;
					border-radius: 30px;
					height: 400px;
					object-fit: cover;
					object-position: center;
					@include breakpoint-575{
						height: 260px;
					}
				}
				&::after{
					content: '';
					position: absolute;
					background-color: $clr-primary;
					height: 100%;
					width: 100%;
					left: 0px;
					top: 0px;
					opacity: 0.6;
					z-index: -1;
				}
				iframe{
					height: 400px; 
					width: 100%;
					@include breakpoint-575{
						height: 260px;
					}
				}
			}
		}
	}
	.swiper-slide {
		text-align: center;
		background-size: cover;
		background-position: center;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		&.title {
			opacity: 0;
			transition: 0.5s ease 0.5s;
		}
	  }
	.swiper-slide-active{
		.title {
			opacity: 1;
			font-size: 80px;
			color: $clr-white;
			font-weight: 800;
			font-style: italic;
			text-transform: uppercase;
			transition: opacity 0.5s ease 0.5s;
			@include breakpoint-768{
				font-size: 38px;
			}
		}
	}
	  
	.trv-gl-thumb  {
		width: 100%;
		position: relative;
		z-index: 1;
		margin-top: 20px;
		.swiper-slide {
			width: 25%;
			flex-flow: row nowrap;
			height: 100%;
			cursor: pointer;
			overflow: hidden;
			@include breakpoint-480{
				flex-flow: column nowrap;
				width: 100%;
			}
		}
		.swiper-slide-thumb-active {
			opacity: 1;
		}
		img{
			height:120px;
			object-fit: cover;
			object-position: center;
			border-radius: 20px;
			@include breakpoint-768{
				border-radius: 10px;
			}
		}
	}

}

/*== tv testimo style2 start==*/
.trv-testimo-stories-bx{
	display: flex;
	align-items: center;
	@include breakpoint-767{
		display: block;
	}
	.media{
		margin-bottom: 0px;
		position: relative;
		max-width: 375px;
		z-index: 1;
		margin-right: 95px;
		@include breakpoint-991{
			max-width: 250px;
        	margin-right: 30px;
		}
		@include breakpoint-767{
			margin: 0px auto 30px;
		}
		&:after{
			content: '';
			width: 330px;
			height: 330px;
			border-radius:50% ;
			background-color: $clr-primary;
			position: absolute;
			right: -42px;
			top: 50%;
			transform: translateY(-50%);
			z-index: -1;
			@include breakpoint-1199{
				right: -25px;
			}
			@include breakpoint-991{
				display: none;
			}
		}
		&:before{
			content: '';
			width: 380px;
			height: 380px;
			border-radius:50% ;
			background-color: $clr-yellow;
			opacity: 0.1;
			position: absolute;
			right: -94px;
			top: 50%;
			transform: translateY(-50%);
			z-index: -1;
			@include breakpoint-1199{
				right: -60px;
			}
			@include breakpoint-991{
				display: none;
			}
		}
		img{
			border-radius: 30px;
		}
	}
	.rating{
		float: right;
		@include breakpoint-767{
			float: none;
		}
		@include breakpoint-480{
			text-align: center;
		}
		i{
			color: $clr-yellow;
			font-size: 16px;
			margin-right: 3px;
		}
	}
	.info{
		max-width: 490px;
		margin: 0px auto;
		@include breakpoint-991{
			max-width: 100%;
			margin-right: auto;
			margin-left: inherit;
			margin-top: 30px;
		}
		@include breakpoint-767{
			margin: 30px auto 0px;
		}
		.trv-testimo-head{
			display: flex;
			align-items: start;
			justify-content: space-between;
			margin-bottom: 25px;
			@include breakpoint-480{
				flex-direction: column-reverse;
				align-items: center;
				text-align: center;
			}
			.left-part{
				.trv-testimonial-name{
					font-family: $font-style3;
					font-size: 36px;
					font-weight: 400;
					color: $clr-primary;
					margin-bottom: 0px;
					@include breakpoint-991{
						font-size: 28px;
					}
				}
				.trv-testimonial-position{
					font-family: $heading-font;
					font-size: 20px;
					font-weight: 500;
					color: $clr-yellow;
					display: inline-block;
					@include breakpoint-991{
						font-size: 18px;
					}
				}
			}
			.right-part{

				img{
					max-width: 70px;
					max-height: 58px;
					width: 100%;
					filter: brightness(0) saturate(100%) invert(25%) sepia(21%) saturate(4469%) hue-rotate(154deg) brightness(93%) contrast(95%);
					@include breakpoint-991{
						max-width: 44px;
					}
					@include breakpoint-480{
						margin-bottom: 10px;
					}
				}
			}
		}
		p{
			font-family: $heading-font;
			font-size: 24px;
			color: $common-font-color;
			margin-bottom: 20px;
			@include breakpoint-991{
				font-size: 18px;
			}
			@include breakpoint-480{
				text-align: center;
			}
		}
	}
}


/*Tour Package Detail*/

/* ----- Sticky Navbar ----- */
.navbar-one {
	position: sticky;
	top: 120px;
	background-color: $clr-primary;
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 15px;
	z-index: 9;
	margin-bottom: 50px;
	border-radius: 10px;
	transition: $transition;
	@include breakpoint-991{
		top: 80px;
		gap: 10px;
	}
	@include breakpoint-767{
		gap: 5px;
		padding: 10px;
	}
	@include breakpoint-400{
		flex-wrap: wrap;
	}
	a {
		color: $clr-primary;
		text-decoration: none;
		font-weight: 600;
		background-color: $clr-white;
		padding: 10px 20px;
		border-radius: 10px;
		font-size: 14px;
		font-family: $common-font-color;
		transition: $transition;
		@include breakpoint-991{
			font-size: 14px;
			padding: 10px 12px;
		}
		@include breakpoint-767{
			font-size: 12px;
			padding: 4px 6px;
			border-radius: 4px;
		}
		@include breakpoint-400{
			width: 48%;
		}
		&:hover {
			background-color: $clr-yellow;

		}
	}
}

.trv-packege-esti-time{
	margin-bottom: 30px;
	font-weight: 600;
	display: block;
}

.trv-checklist-mini{
	padding: 0px;
	list-style: none;
	margin: 20px 0px;
	li{
		font-family: $font-style2;
		font-size: 15px;
		font-weight: 400;
		color: $clr-primary;
		position: relative;
		padding-left: 30px;
		margin-bottom: 8px !important;
		text-align: left;
		i{
			position: absolute;
			font-size: 14px;
			color: $clr-yellow;
			left: 0px;
			top: 4px;
		}
		span{
			font-weight: 600;
		}
	}
}

/*Inclusions / Exclusions*/
.trv-checklist-st2-mini-wrap{
	background-color: $clr-light-yellow;
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 40px;
	@include breakpoint-420{
		padding: 30px 30px 0px 30px;
	}
	.trv-checklist-st2{
		margin-bottom: 30px;
	}
}
.trv-checklist-st2-mini-r{
	@include breakpoint-1199{
		margin-top: 30px;
	}
}
.trv-checklist-st2-mini{
	padding: 30px;
	list-style: none;
	margin-bottom: 0px;
	height: 400px;
	overflow-y: scroll;
	border: 1px solid $bgcolor2;
	@include breakpoint-400{
		padding: 10px;
	}
 &{
    scrollbar-width: thin;
    scrollbar-color: $clr-primary;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #ffffff;
  }

  &::-webkit-scrollbar-thumb {
    background-color:  $clr-primary;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }


	li{
		font-family: $font-style2;
		font-size: 16px;
		font-weight: 400;
		color: $clr-primary;
		position: relative;
		padding-left: 30px;
		margin-bottom: 18px;
		i{
			position: absolute;
			font-size:18px;
			color: $clr-primary;
			left: 0px;
			top: -3px;
		}
		span{
			font-weight: 600;
		}
		&:last-child{
			margin-bottom: 0px;
		}
	}
	&.trv-list-disable{
		li{
			i{
				color: #ff4545
			}
		}
	}
}

.trv-de-list-st1:last-child{
	margin-bottom: 0px;
}

.trv-tour-single-r-detail{
	background-color: #fff;
	border: 1px solid rgba(6, 97, 104, 0.2);
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 30px;
	@include breakpoint-1199{
		padding: 20px;
		border-radius: 16px;
	}

	.trv-star-from{
		display: block; 
		color: $clr-primary;
		font-weight: 600;
	}
	.trv-star-amount{
		font-size: 48px; 
		color: $clr-primary;
		font-weight: 600;
		@include breakpoint-360{
			font-size: 38px;
		}
		s{
			font-size: 38px;
			color: $clr-yellow;
			@include breakpoint-360{
				font-size: 28px;
			}
		}
	}
}

.trv-emi_text{
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 10px;
	i{padding-right: 5px;}
	a{
		color: #0D7BDC;
		transition: $transition;
		display: block;
		&:hover{
			color: $clr-primary;
		}
	}
	.trvng-binding{
		font-size: 18px;
		color: $clr-primary;
	}
}

.trv-tour-single-r-info{
	background-color: #fff;
	border: 1px solid rgba(6, 97, 104, 0.2);
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 30px;
	@include breakpoint-1199{
		padding: 20px;
		border-radius: 16px;
	}
	@include breakpoint-991{
		margin-bottom: 0px;
	}
}

.trv-main-rg-hol {
  width: 100%;
}
.trv-man-sec-hol {
  margin: 0px;
  width: 100%;
	ul {
		margin: 0px;
		padding: 0px;
		li {
			margin: 0px;
			padding: 0px 0px 10px 0px;
			color: $clr-primary;
			width: 100%;
			font-size: 14px;
			font-weight: 500;
			list-style: none;
			.trv-tmi-hlo{
				font-weight: 800;
			}
			.trv-tmi-hlo-info{
				line-height: 24px;
				font-size: 13px;
			}
		}
	}
}

.trv-oack-sepa {
  position: relative;
  margin: 40px 0;
  text-align: center;
  z-index: 1;
  width: 100%;
    .lay {
		display: inline-block;
		padding: 6px 20px;
		border-radius: 50px;
		width: auto;
		font-size: 15px;
		font-weight: 500;
		color: $clr-white;
		background-color: $clr-primary;
	}

	&:before {
		content: '';
		display: block;
		border-bottom: 1px solid #bcbcbc;
		margin-top: 18px;
		position: absolute;
		width: 100%;
		z-index: -1;
	}
}

.trv-icon-man-holids{
	ul{
		margin: 0px;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		li {
			margin: 0 8px;
			padding: 0px;
			display: inline-block;
			list-style: none;
			font-size: 14px;
			line-height: 13px;
			background-color: #fff0;
			box-shadow: none;
			text-align: center;
			&:last-child{
				margin-right: 0px;
			}
			&:last-child{
				margin-left: 0px;
			}
			.trv-holids-icon{
				margin-bottom: 10px;
				img{
					width: auto; 
					height: 40px;
					filter: brightness(0) saturate(100%) invert(22%) sepia(94%) saturate(1002%) hue-rotate(151deg) brightness(96%) contrast(95%);
					@include breakpoint-360{
						height: 34px;
					}
				}
			}
			.trv-holids-name{
				margin: 10px 0px;
			}
		}
	}
}

/*Enquairy Popup*/
.trv-enq-popup-wrap{
	.trv-enq-popup-title1{
		font-size: 28px;
		margin:0px;
		@include breakpoint-575{
			font-size: 20px;
		}
	}
	.trv-enq-popup-title2{
		font-size: 24px;
		margin: 35px 0px;
		border-bottom: 1px solid rgba(6, 97, 104, 0.20);
		padding-bottom: 14px;
		@include breakpoint-575{
			font-size: 18px;
		}
	}
}
.trv-enq-popup{
	padding:30px;
	@include breakpoint-575{
		padding:0px;
	}
	.form-group{
		margin-bottom: 30px;
		label{
			padding-bottom: 10px;
			font-weight: 600;
			font-family: $heading-font;
			font-size: 16px;
			margin-right: 10px;
		}
	}
	.form-control{
			display: block;
			width: 100%;
			height: 56px;
			border-radius: 50px;
			border: 1px solid rgba(41, 137, 145, 0.22);
			padding: 20px 20px;
			font-weight: 600;
			font-size: 16px;
			color: $clr-primary;
			@include breakpoint-575{
				padding: 5px 15px;
				height: 50px;
				font-size: 14px;
			}
			&::placeholder{
				font-family: $font-style2;
				font-size: 14px;
				font-weight: 400;
				color: $common-font-color;
				opacity: 0.8;
			}
	}

	.bootstrap-touchspin{
		.form-control{
			height: 40px;
			padding: 2px 20px;
			border-radius: 50px !important;
		}
		.btn{border: none;}
	}
	@include breakpoint-420{
		.btn-quantity2 {
			max-width: 80px;
		}
	}
}

/*Tour Package banner*/
.trv-tr-pack-bnr-wrap{
	position: relative;
	height: 600px;
	display: flex;
	align-items: end;
	justify-content: center;
	z-index: 10;
	&::after{
		content: '';
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		position: absolute;
		background: #000000;
		background: linear-gradient(2deg, rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0.51) 50%, rgba(0, 0, 0, 0) 100%);
	}
}

/*Search Style 2*/
.trv-search-st5{
	max-width: 650px;
	margin: 0px auto 60px;
	position: relative;
	z-index: 100;
	@include breakpoint-575{
		margin: 0px auto 10px;
	}
	.trv-search-st5-title{
		color:$clr-white;
		text-align: center;
		font-size: 42px;
		margin-bottom: 30px;
	}
	.trv-search-st1-bg{
		height: 80px;
		background-color: $clr-white;
		border-radius: 100px;
		padding:10px;
		@include breakpoint-767{
			height: auto;
		}
		@include breakpoint-640{
			border-radius: 20px;
			padding: 20px;
		}
	}
	.trv-search-st1-column-wrap{
		display: flex;
		justify-content: space-between;
		@include breakpoint-640{
			display: block;
		}
	}
	.trv-search-st1-search-btn{
		.srch-btn{
			font-size: 28px;
			color: $clr-primary;
			border: none;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			background-color: $clr-green;
			transition: $transition;
			@include breakpoint-640{
				border-radius: 10px;
				width: 100%;
			}
			@include breakpoint-575{
				font-size: 18px;
				height: 40px;
			}
			&:hover{
				color: $clr-primary;
				background-color: $clr-yellow;
			}
		}
	}
	.trv-search-st1-column{
		text-align: left;
		width: calc(50% - 20px);
		padding: 0px 20px;
		position: relative;
		display: flex;
  		align-items: center;
		@include breakpoint-640{
			padding: 0px;
		}
		.form-group{
			@include breakpoint-640{
				width: 100%;
			}
		}
		&:before{
			border-left: 1px solid #ddd;
			margin-right: 20px;
			content: '';
			position: absolute;
			left: 0px;
			top: 0px;
			bottom: 0px;
			@include breakpoint-640{
				border: none;
				margin-right: 0px;
			}
		}
		&:first-child:before{
			display: none;
		}
		@include breakpoint-640{
			width: 100%;
			margin-bottom: 20px;
		}
		label{
			padding-bottom: 0px;
			font-family: $heading-font;
			font-weight: 700;
			font-size: 14px;
			color: $clr-primary;
		}
		.form-control{
			background-color: transparent;
			height: 24px;
			padding: 0px;
			font-family:$font-style2;
			font-weight: 400;
			font-size: 14px;
			line-height: 1.2;
			color: #545454;
			background-image: none;
			&:focus{
				box-shadow: none;
			}

			&.bootstrap-select > .dropdown-toggle{
				border: none;
				background-color: transparent;
				padding: 2px 0px 0px 0px;
				font-size: 14px;
				color: #545454;
				&:after {
					margin-top: 0;
				}
			}
		}
	}
	.input-group-text{
		background-color: transparent;
		border: none;
		color: #9d9d9d;
		padding: 0;
		margin-top: 4px;
		margin-right: 4px;
	}
	input::placeholder{
		color: #545454;
	}

	.btn-quantity2{
		@include breakpoint-640{
			max-width: inherit;
			width: auto;
			margin-right: 42px;
			display: flex;
		}
	}
	
}

/* Tour package Filter bar */
.trv-pack-filter-bar-wrap{
	padding: 30px;
	position: sticky;
	top: 90px;
	z-index: 10;
	@include breakpoint-1365{
		top: 50px;
		padding: 30px 22px;
	}
	@include breakpoint-575{
		padding: 30px 0px;
	}
}
.trav-pack-filter-bar{
	background-color: $bgcolor2;
	border-radius: 10px;
	padding: 10px;
	@include breakpoint-575{
		padding: 5px;
	}
}

/* Filter Bar Container */

.trv-filter-bar-section {
	background-color:$clr-white;
	padding: 12px 16px;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;

	@include breakpoint-991{
		display: block;
	}
	@include breakpoint-575{
		padding: 5px;
	}
}

.trv-filter-bar-left{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	.trv-filter-btn {
		border: 1px solid #e0e0e0;
		background-color: #f9f9f9;
		color: $clr-primary;
		padding: 8px 18px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		position: relative;
		transition: all 0.3s ease;
		white-space: nowrap;
		width: 100%;
		@include breakpoint-991{
		  display: flex;
		  justify-content: space-between;
		}
		@include breakpoint-575{
		  padding: 3px 10px;
		  font-size: 12px;
		  border-radius: 4px;
		}
		&:hover{
			background-color:$clr-white;
			border-color: #ccc;
		}
		i{font-size: 12px; padding-left: 10px;}
	}
}
.trv-filter-bar-right{
	@include breakpoint-991{
		text-align: center;
		padding-top: 10px;
	}
}
.trv-reset-btn {
	color: $clr-primary;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	margin-left: 10px;
	text-decoration: none;
	transition: color 0.3s ease;
	&:hover{
		color: $clr-yellow;
	}
}


.trv-filter-content {
	display: none;
	position: absolute;
	top: 60px;
	left: 0;
	background-color: $clr-white;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 15px;
	z-index: 100;
	width: 250px;
	animation: fadeIn 0.5s ease;
	@include breakpoint-991{
		top: 40px;
	}
	&.active {
		display: block;
	}
	h4 {
		margin: 0 0 10px;
		font-size: 15px;
	}
	label {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
		cursor: pointer;
	}
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

.trv-filter-bar-bx{
	position: relative;
	@include breakpoint-991{
		width: 32.2%;
	}
	@include breakpoint-767{
		width: 48.8%;
	}
	@include breakpoint-575{
		width: 47.8%;
	}
	@include breakpoint-540{
		width: 100%;
	}
}

/*Tour Pakage style new*/
.trv-popular-tour-pakagenew{
	.trv-media{
		position: relative;
		overflow: hidden;
		border-radius: 30px 30px 0px 0px;
		.trv-tour-compare{
			position: absolute;
			top: 30px;
			left: 0px;
			padding: 6px 10px;
			background-color: $clr-white;
			color: $clr-primary;
			font-weight: 600;
			font-size: 14px;
			border-radius: 0px 50px 50px 0px;
			display: flex;
  			align-items: center;
			input{
				margin-right: 10px;
			}
			span{display: block;}
		}
		
		a{
			img{
				height: 220px;
				width: 100%;
				object-fit: cover;
				object-position: center;
				@include breakpoint-1199{
					height: 320px;
				}
			}
		}
	}
	.trv-tour-duration{
		margin-bottom: 10px;
	}
	.trv-tour-title{
		transition: $transition;
		margin-bottom: 10px;
		.trv-title{
			margin-bottom: 0px;
			font-size: 24px;
			font-weight: 500;
			@include breakpoint-1199{
				font-size: 22px;
			}
			a{
				color: $clr-primary;
			}
			
		}
	}
	.trv-star-amount2{
		font-size: 28px;
		color: $clr-primary;
		font-weight: 600;
		s{
			font-size: 18px;
			color: $clr-yellow;
		}
	}
	.trv-star-from-person2{
		display: block;
	}
	.trv-star-from2{
		display: block; 
		color: $clr-primary;
		font-weight: 600;
	}
	.trv-content{
		background-color: $clr-white;
		padding: 30px;
		border-radius: 0px 0px 30px 30px;
		box-shadow: 0px 18px 18px rgba(0, 106, 114, 0.15);
		@include breakpoint-575{
			padding: 20px;
		}
		.trv-content-head-section{
			margin-bottom: 10px;
			@include breakpoint-1199{
				display: block;
			}
			.trv-tour-info{
				font-size: 16px;
				line-height: 1.3;
				font-family: $heading-font;
				font-weight: 500;
			}
		}
		.trv-content-bottom-section{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
}

.trv-checklist-mini2{
	padding: 0px;
	list-style: none;
	margin: 10px 0px 20px 0px;
	li{
		font-family: $font-style2;
		font-size: 12px;
		font-weight: 400;
		color: $clr-primary;
		position: relative;
		padding-left: 20px;
		margin-bottom: 2px !important;
		text-align: left;
		display: inline-block;
		margin-right: 10px;
		i{
			position: absolute;
			font-size: 14px;
			color: $clr-yellow;
			left: 0px;
			top: 0px;
		}
		span{
			font-weight: 600;
		}
	}
}

.trv-icon-man-holids2{
	border-top:1px solid $bgcolor2;
	border-bottom:1px solid $bgcolor2;
	padding: 10px 0px 0px 0px;
	margin-bottom: 10px;
	ul{
		margin: 0px;
		padding: 0px;
		li {
			margin: 0 8px;
			padding: 0px;
			display: inline-block;
			list-style: none;
			text-align: center;
			&:last-child{
				margin-right: 0px;
			}
			&:last-child{
				margin-left: 0px;
			}
			.trv-holids-icon{
				margin-bottom: 10px;
				img{
					width: auto; 
					height: 30px;
					filter: brightness(0) saturate(100%) invert(22%) sepia(94%) saturate(1002%) hue-rotate(151deg) brightness(96%) contrast(95%);
					@include breakpoint-360{
						height: 34px;
					}
				}
			}
		}
	}
}

/** - Filter Buttons Css */
.trv-package-sec-wrap{
	@include breakpoint-1024{
		padding-top: 0px !important;
	}
}
.trv-filter-wrap{
	margin-bottom: 40px;
	text-align: center;
	@include breakpoint_767{
		margin-bottom: 20px;
	}
	@include breakpoint_640{
		text-align: left;
	}
	.masonry-filter{
		display: flex;
		flex-wrap: wrap;
		justify-content:left;
		margin-bottom: 0;
		background-color: $bgcolor2;
		border-radius: 10px;
		padding: 4px 20px;
		@include breakpoint_767{
			padding:20px;
		}
		>li{
			display: inline-block;
			
			&:last-child {
				margin-right: 0;
			}
		}
		li{
			position: relative;
			z-index: 1;
			margin-bottom: 0px;
			gap: 10px;
			text-align: left;
			@include breakpoint-1199{
				width: auto;
			}
			@include breakpoint_767{
				width: 100%;
			}
			&.active{
				a{
					border-radius: 100px;
					transition: $transition;
					color: $clr-primary;
					&:hover{
						a{
							color: $clr-yellow;
						}
					}
				}
			}
			
			a{
				color:$clr-primary;
				font-size: 14px;
				position: relative;
				z-index: 1;
				display: block;
				font-weight: 600;
				padding: 10px 14px;
				border-radius: 100px;
				transition: $transition;
				display: flex;
				margin-right: 20px;
				&:hover{
					color: $clr-yellow;
				}
				img{
					margin-right: 10px;
					height: 20px;
					filter: brightness(0) saturate(100%) invert(28%) sepia(17%) saturate(3758%) hue-rotate(146deg) brightness(94%) contrast(95%);
				}
			}
		}
	}
}

/* Home 4 Banner */

.trv-hp4-bnr-wrap{
	position: relative;
	height: 760px;
	z-index: 10;
	&::after{
		content: '';
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		position: absolute;
		background: #000000;
		background: linear-gradient(2deg, rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0) 50%, rgba(0, 0, 0, 0) 100%);
		z-index: 11;
	}
	&::before{
		content: '';
		left: 0px;
		right: 0px;
		bottom: 0px;
		position: absolute;
		background-image:url(../images/main-slider/slider4/shade.png);
		z-index: 12;
		height: 140px;
		filter: brightness(0) saturate(100%) invert(92%) sepia(70%) saturate(6294%) hue-rotate(177deg) brightness(116%) contrast(102%);

		@include breakpoint-575{
			display: none;
		}
	}

}

.trv-hp4-bnr-wrap{
	.trv-search-st5{
		max-width: 650px;
		width: calc(100% - 20px);
		margin: 0px auto 120px;
		position: absolute;
		z-index: 100;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		@include breakpoint-575{
			margin: 0px auto 10px;	
		}
		.trv-search-st5-title{
			color:$clr-white;
			text-align: center;
			font-size: 42px;
			margin-bottom: 30px;
			@include breakpoint-575{
				font-size: 36px;
				line-height: 40px;	
			}
		}
		.trv-search-st1-bg{
			height: 80px;
			background-color: $clr-white;
			border-radius: 100px;
			padding:10px;
			@include breakpoint-767{
				height: auto;
			}
			@include breakpoint-640{
				border-radius: 20px;
				padding: 20px;
			}
		}
		.trv-search-st1-column-wrap{
			display: flex;
			justify-content: space-between;
			@include breakpoint-640{
				display: block;
			}
		}
		.trv-search-st1-search-btn{
			.srch-btn{
				font-size: 28px;
				color: $clr-primary;
				border: none;
				border-radius: 50%;
				width: 60px;
				height: 60px;
				background-color: $clr-green;
				transition: $transition;
				@include breakpoint-640{
					border-radius: 10px;
					width: 100%;
				}
				@include breakpoint-575{
					height: 40px;
					font-size: 18px;
				}
				&:hover{
					color: $clr-primary;
					background-color: $clr-yellow;
				}
			}
		}
		.trv-search-st1-column{
			text-align: left;
			width: calc(50% - 20px);
			padding: 0px 20px;
			position: relative;
			display: flex;
			align-items: center;
			@include breakpoint-640{
				padding: 0px;
			}
			.form-group{
				@include breakpoint-640{
					width: 100%;
				}
			}
			&:before{
				border-left: 1px solid #ddd;
				margin-right: 20px;
				content: '';
				position: absolute;
				left: 0px;
				top: 0px;
				bottom: 0px;
				@include breakpoint-640{
					border: none;
					margin-right: 0px;
				}
			}
			&:first-child:before{
				display: none;
			}
			@include breakpoint-640{
				width: 100%;
				margin-bottom: 20px;
			}
			label{
				padding-bottom: 0px;
				font-family: $heading-font;
				font-weight: 700;
				font-size: 14px;
				color: $clr-primary;
			}
			.form-control{
				background-color: transparent;
				height: 24px;
				padding: 0px;
				font-family:$font-style2;
				font-weight: 400;
				font-size: 14px;
				line-height: 1.2;
				color: #545454;
				background-image: none;
				&:focus{
					box-shadow: none;
				}

				&.bootstrap-select > .dropdown-toggle{
					border: none;
					background-color: transparent;
					padding: 2px 0px 0px 0px;
					font-size: 14px;
					color: #545454;
					&:after {
						margin-top: 0;
					}
				}
			}
		}
		.input-group-text{
			background-color: transparent;
			border: none;
			color: #9d9d9d;
			padding: 0;
			margin-top: 4px;
			margin-right: 4px;
		}
		input::placeholder{
			color: #545454;
		}

		.btn-quantity2{
			@include breakpoint-640{
				max-width: inherit;
				width: auto;
				margin-right: 42px;
				display: flex;
			}
		}
		
	}

	.trv_hp4-slider{
		width: 100%;
		.trv_d-slider-media{
			overflow: hidden;
		}
		img{
			height: 760px;
			object-fit: cover;
			object-position: center;
			width: 100%;
		}
	}
}

/*Ad Section Start*/
.trv-adfull-section{
	padding-bottom: 120px;
	.trv_ad-slider{
		width: 100%;
		.trv_ad-slider-media{
			overflow: hidden;
			border-radius: 10px;
		}
		img{
			width: 100%;
			border-radius: 10px;
			@include breakpoint-480{
				height: 54px;
			}
		}
	}
}


/*Gallery 2 Section*/
.trv-gallery2-wrap{
	background-color: $clr-white;
	.trv-gallery-section{
		margin-bottom: 10px;
	}
	
	.trv-gallery-st2{
		position: relative;
		margin-bottom: 20px;
		overflow: hidden;
		border-radius: 30px;
		@include breakpoint-1199{
			border-radius: 15px;
		}
		&.l-pic{
			img{
				height:250px;
				@include breakpoint-1199{
					height: 210px;
				}
				@include breakpoint-991{
					height: 160px;
				}
				@include breakpoint-575{
					height: 340px;
				}
			}
		}
		&.p-pic{
			img{
				height: 520px;
				@include breakpoint-1199{
					height: 440px;
				}
				@include breakpoint-991{
					height: 340px;
				}
			}
		}
		.trv-gallery-st2-media{
			position: relative;
			background: $clr-black;
			text-align: center;
			overflow: hidden;
			z-index: 1;
			&:after{
				content: '';
				position: absolute;
				left: 0px;
				top: 0px;
				right: 0px;
				bottom: 0px;
				background: transparent linear-gradient(180deg, #FFFFFF00 0%, #A0A0A000 37%, #71717100 48%, #3C3C3C77 62%, #252525AB 83%, #000000 100%) 0% 0% no-repeat padding-box;
			}
			img{
				position: relative;
				display: block;
				max-width: none;
				transition: opacity 0.35s, transform 0.35s;
				transform: translate3d(-4px,-1px,0);
				backface-visibility: hidden;
				width: 110%;
				object-fit: cover;
				object-position: bottom;
			}
			&:hover{
				img{
					opacity: 0.2;
					transform: translate3d(0,0,0);
				}
			}

		}
		.trv-gallery-st2-title{
			text-align: left;
			display: block;
			border-radius: 6px;
			color: $clr-white;
			position: absolute;
			left: 20px;
			bottom:50px;
			opacity: 1;
			transition: $transition;
			font-size: 20px;
			font-weight: 500;
			z-index: 5;
			@include breakpoint-1199{
				font-size: 16px;
			}
			&:hover{
				color: $clr-yellow;
			}
		}
		
		.trv-gallery-st2-dur{
			position: absolute;
			bottom: 20px;
			left: 20px;
			font-size: 13px;
			color: $clr-white;
			z-index: 5;
			b{
				font-size: 20px;
				color: $clr-yellow;
				margin-left: 10px;
			}
		}
	
	}
	.trv-gallery-st2-box{
		margin-bottom: 20px;
		height: 520px;
		overflow: hidden;
		background: linear-gradient(180deg, rgba(12, 192, 206, 0) 40%, #066168 100%);
		border-radius: 30px;
		text-align: center;
		display: flex;
		align-items: end;
		justify-content: center;
		@include breakpoint-1199{
			height: 440px;
		}
		@include breakpoint-991{
			height: 340px;
			border-radius: 15px;
		}
		@include breakpoint-767{
			height: auto;
		}
		.trv-media{
			img{
				width: auto
			}
		}
		
	}
}

.trv-tsmo-banner-wrap{
	background-color: $bgcolor1;
	position: relative;
	overflow: hidden;
	.trv-tsmo-abs-image{
		position: absolute;
		top: 50px;
		right: -50px;
		z-index: 1;
		width: 500px;
		transform: scaleX(-1);
		@include breakpoint-1200{
			top: 0px;
		}
		@include breakpoint-1024{
			width: 260px;
			right: -20px;
		}
		@include breakpoint-575{
			display: none;
		}
	}
}

.trv-tsmo-banner {
	margin: 0px auto 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 60px 80px;
    border-radius: 20px;
    width: 100%;
    overflow: hidden;
	background-size: cover;
	position: relative;
	z-index: 1;
	@include breakpoint-1199{
		padding: 30px;
	}
	@include breakpoint-991{
		background-position: right;
	}
	&:before{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent linear-gradient(270deg, #FFFFFF00 0%, #A0A0A000 37%, #71717100 48%, #3C3C3C77 62%, #252525AB 83%, #000000 100%) 0% 0% no-repeat padding-box;
		opacity: 0.75;
		z-index: -1;
		@include breakpoint-991{
			width: 160%;
			opacity: 0.95;
		}
	}

  .trv-tsmo-text {
    flex: 1;
    max-width: 500px;
	@include breakpoint-991{
		max-width: 300px;
	}
	
	.trv-tsmo-title-sm {
		font-size: 32px;
		margin: 0;
		color: $clr-yellow;
		font-family: $font-style3;
		@include breakpoint-768{
			font-size: 20px;
		}
	}

	.trv-tsmo-title-md {
		font-size: 42px;
		margin: 10px 0;
		font-weight: 700;
		font-family: $heading-font;
		color: $clr-white;
		@include breakpoint-768{
			font-size: 28px;
		}
	}

	p {
		font-size: 16px;
		color: #e0e0e0;
		margin-bottom: 25px;
	}
  }

}

/*Holiday Package*/
.trv-holi-pack-wrap{
	background-color: $clr-white;
}


/** - Project Btn Filter */
.trv-pro-filtr-cate-wrap{
	position: relative;
}
.trv-pro-filtr-cate-carousal-wrap{
	position: relative; 
	overflow: hidden; 
	background-color: $bgcolor2; 
	padding: 30px; 
	border-radius: 20px; 
	margin-bottom: 30px;
	@include breakpoint-575{
	padding: 20px; 	
	}
	.trv-project-filter-wrap.pro-filtr-cate-carousal{
		list-style: none; 
		margin: 0px 0px 20px 0px;  
		padding: 0px 0px 15px 0px; 
		border-bottom: 1px solid #dedede;

		span{
			position: relative;	
			display: inline-block;
			font-size: 16px;
			font-weight: 500;	
			color: #000;
			padding: 10px 20px;
			cursor: pointer;
			border-radius: 100px;  
			transition: all 0.5s ease; 
			margin: 0px 10px;  
			border: 1px solid #dedede;
			@include breakpoint-575{
				margin: 0px 10px 10px 0px;  	
			}
			&.active{
				background-color: $clr-primary; 
				box-shadow: 0 8px 10px rgba(12,12,12,.1);	
				color: #fff; 
				border: 1px solid $clr-primary;
			}
			&:hover{
				background-color: $clr-yellow;
				box-shadow: 0 8px 10px rgba(12,12,12,.1);	
				color: #fff !important; 
				border: 1px solid $clr-yellow;
			}

		}
	}
}

.non-swiper-slide {display: none !important;}

.pro-filtr-cate-bx-sec{
	overflow: hidden; position: relative;
	.swiper-button-prev,
	.swiper-button-next{
		top: 50%;
		transform: translateY(-50%);
	}
}


.ft-lat-work-bx{
	position: relative; 
	overflow: hidden; 
	border-radius: 30px; 
	margin: 0px 10px;
	@include breakpoint-575{
		margin:0px;  	
	}
	.ft-lat-work-bx-media{
		img{width: 100%;}
	}
	.ft-lat-work-bx-content{
		position: absolute; 
		bottom: 0px; 
		left: 0px; 
		right: 0px;
		padding: 20px;
		background: rgba(255, 255, 255, 0.01); 
		backdrop-filter: blur(15px); 
		transition: all 0.5s linear; 
		transform: translateY(10px);
		text-align: center;
		@include breakpoint-575{
			padding:10px;  	
		}
		.ft-title{ 
			font-weight: 500; 
			font-size: 26px;
			a{
				color: #fff;
				transition: all 0.5s ease;
				&:hover{
					color: $clr-yellow;
				}
			}
		}
		p{color: rgba(255,255,255,0.6);   font-family: "Noto Sans", sans-serif;}

	}
	&:hover{
		.ft-lat-work-bx-content{transform: translateY(0px);}
	}
}


/*Theme SLider*/
.trv-holi-theme-wrap{
	background-color:$clr-light-yellow;
	@include breakpoint-1024{
		padding-bottom: 0px !important;
	}
}
.trv-holi-theme-sec{
	margin-bottom: 30px;
}
.trv-holibg-pic{
	text-align: center;
}
.trv-holi-theme-bx{
	display: flex;
	.trv-holi-theme-media{
		width: 80px; 
		min-width: 80px; 
		min-height: 80px; 
		margin-right: 10px; 
		border-radius: 10px; 
		background-color: $clr-white; 
		padding: 10px; 
		display: flex; 
		align-items: center; 
		justify-content: center; 
		border: 1px solid $clr-yellow; 
		position: relative;
		img{ 
			width: 46px; 
			filter: brightness(0) saturate(100%) invert(13%) sepia(72%) saturate(7110%) hue-rotate(178deg) brightness(81%) contrast(95%);
		}
	}
	.trv-holi-theme-info{
		border-radius: 10px; 
		background-color: $clr-primary; 
		padding: 10px 20px; 
		flex: 1;
		.trv-holi-title{
			font-size: 22px; 
			color: $clr-white;}
		p{
			margin-bottom: 0px;  
			color: $clr-white;
		}
	}
	
}

/*Visa Slider*/

 .trv-visa-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
	span {
		position: relative;	
		display: inline-block;
		font-size: 16px;
		font-weight: 500;	
		color: $clr-white;
		padding: 10px 20px;
		cursor: pointer;
		border-radius: 100px;  
		transition: all 0.5s ease; 
		margin-right:20px;  
		background-color: $clr-primary;
		@include breakpoint-575{
			margin-right:0px; 
		}
	}
	
	.active {
		background-color:$clr-yellow;
		color: $clr-primary
	}
}
.trv-visa-filter-bx{margin-bottom: 30px;}

.trv-visa-sec-media-wrap{
	background-size: cover;
}
 .trv-visa-sec-media{
		border-radius: 30px;
		padding: 15px;
		background-color: $clr-white;
		overflow: hidden;
		img{
			border-radius: 20px;
			width: 100%;
			height: 450px;
			object-fit: cover;
			object-position: center;
			@include breakpoint-575{
				height: 350px;
			}
		}
		.trv-bx-title{
			font-size: 28px;
			font-weight: 500;
			margin-top: 10px;
			margin-bottom: 0px;
			text-align: center;
			@include breakpoint-768{
				font-size: 22px;
			}
			a{
				transition: $transition;
				color: $clr-primary;
				&:hover{
					color: $clr-yellow;
				}
			}
		}
}

.trv-tsmo-banner2-wrap{
	background-color: $clr-light-yellow;
	.trv-tsmo-banner2 {
		margin: 0px auto 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		padding: 60px 80px;
		border-radius: 20px;
		width: 100%;
		overflow: hidden;
		background-size: cover;
		position: relative;
		z-index: 1;
		@include breakpoint-1199{
			padding: 30px;
		}
		@include breakpoint-991{
			background-position: right;
		}
		&:before{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: transparent linear-gradient(270deg, #FFFFFF00 0%, #A0A0A000 37%, #71717100 48%, #3C3C3C77 62%, #252525AB 83%, #000000 100%) 0% 0% no-repeat padding-box;
			opacity: 0.75;
			z-index: -1;
			@include breakpoint-991{
				width: 160%;
				opacity: 0.95;
			}
		}

		.trv-tsmo-text {
			flex: 1;
			max-width: 500px;
			
			.trv-tsmo-title-sm {
				font-size: 32px;
				margin: 0;
				color: $clr-yellow;
				font-family: $font-style3;
				@include breakpoint-768{
					font-size: 20px;
				}
			}

			.trv-tsmo-title-md {
				font-size: 42px;
				margin: 10px 0;
				font-weight: 700;
				font-family: $heading-font;
				color: $clr-white;
				@include breakpoint-768{
					font-size: 28px;
				}
			}

			p {
				font-size: 16px;
				color: #e0e0e0;
				margin-bottom: 25px;
				display: flex;
				align-items: center;
			}
			span{
				font-size: 42px; 
				font-family: $font-style3; 
				color: $clr-green;
				@include breakpoint-768{
					font-size: 28px;
				}
			}
		}

	}

}

/*Booking Benifit Section*/
.trv-ben-book-wrap{background-color: $bgcolor2;}

.trv-ben-book-bx{
	background-color: $clr-white;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	padding: 10px;
	border-radius: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	.trv-ben-media{
		background-color: #f9f9f9;
		border-radius: 20px;
		padding: 30px;
		width: 100%;
		img{max-width: 60px;}
	}
	.trv-ben-title{font-size: 22px; color: $clr-primary; margin: 20px;}
	p{padding: 0px 20px; margin-bottom: 20px; font-size: 16px;}
}

.trv-Trustpilot-section{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	border: 2px solid $clr-yellow;
	padding: 10px 18px;
	border-radius: 40px;
	font-family: "Inter", Arial, sans-serif;
	background: #ffffff;
	margin-top: 30px;
	max-width: 600px;
	margin: 10px auto 40px;

	.trv-title {
		font-size: 17px;
		font-weight: 700;
		color: #000;
	}

	.trv-stars {
		display: flex;
		gap: 4px;

		.star {
			font-size: 12px;
			line-height: 1;
			padding: 5px;
			border-radius: 3px;

			&.filled {
				background: $clr-green;
				color: #fff;
			}

			&.empty {
				background: #dcdcdc;
				color: #ffffff;
			}
		}
	}

	.trv-reviews {
		font-size: 15px;
		text-decoration: underline;
		color: #0072e6;
		cursor: pointer;

		&:hover {
			text-decoration: none;
		}
	}

	.trv-tp-logo {
		font-size: 16px;
		font-weight: 600;
		color: $clr-primary;
		display: flex;
		align-items: center;
		&:before {
			content: "★";
			margin-right: 5px;
			font-size: 18px;
			color: $clr-primary;
		}
	}
}

.trv-rate-review {
  padding: 16px;
  border-radius: 16px;
  background-color: $clr-white;
  border: 6px solid $bgcolor2;;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  font-family: "Inter", Arial, sans-serif;

  .trv-stars-sec {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .trv-stars {
      display: flex;
      gap: 3px;

      .star {
        background-color: $clr-green;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
		width: 18px;
		height: 18px;
		text-align: center;
      }
    }

    .trv-verified {
      font-size: 12px;
      color: #6b6b83;
      display: flex;
      align-items: center;

      .dot {
        width: 8px;
        height: 8px;
        background-color:$clr-yellow;
        border-radius: 50%;
        margin-right: 4px;
      }
    }
  }

  .trv-title {
    margin: 10px 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: $clr-primary;
    line-height: 1.2;
  }

  .trv-desc {
    font-size: 14px;
    margin-bottom: 0px;
    line-height: 1.4;
  }

  .trv-user-time {
    font-size: 12px;
	margin-bottom: 20px;
    .user {
      font-weight: 600;
      color: #000;
    }
  }
}



/*Home Page 5 Css Start*/

.social-icons-hdr{
	margin: 0px 0px 0px 0px;
	display: flex;
	li{
		display: inline-flex;
		margin-right: 0px;
		justify-content: center;
		align-items: center;
		transition: $transition;
		&:last-child{
			margin-right: 0px;
		}
		a{
			height: 36px;
			width: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: $clr-white;
			line-height: 36px;
			padding: 0;
			color:$clr-primary;
			font-size: 16px;
			text-align: center;
			transition: $transition;
			@include breakpoint-991{
				width: 25px;
				height: 25px;
			}
			i{
				transition: $transition;
				display: inline-block;
				line-height: inherit;
				&::before{
					line-height: inherit;
				}
			}
			&:hover {
				color: $clr-yellow;
				border-radius: 10px;
				box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.36);
				
				i{
					transform: rotateY(360deg) scale(1.2);
				}
			}
		}
		&:hover {
			border-radius: 10px;
		}
	}
}

/* Home 5 Banner */
.trv-hp5-bnr-wrap{
	position: relative;
	z-index: 6;
	background-color: $clr-primary;
	padding: 20px;
	
	.trv-hp5-bnr-sec{
		border-radius: 20px;
		overflow: hidden;
		position: relative;
		height: 760px;
		@include breakpoint-1366{
			height: 630px;
		}
		@include breakpoint-768{
			height: auto;
		}
		.trv-hp5-bnr-baloon-top{
			position: absolute;  
			z-index: 6;
			top: 50px;
			left: 740px;
			opacity: 0.5;
			animation: sld-20 2s linear infinite alternate-reverse;
			@include breakpoint-1440{
				max-width: 100px;
				left: 500px;
			}
			@include breakpoint-768{
				max-width: 60px;
				left: auto;
				right: 10px;
			}
		}
		.trv-hp5-bnr-leaf-top{
			position: absolute;  
			z-index: 6;
			top: -90px;
			left: 870px;
			animation: swing 4s ease-in-out infinite alternate;
			@include breakpoint-1440{
				left: 650px;
				width: 190px;
			}
			@include breakpoint-768{
				left: 0px;
				width: 100px;
				top: -30px;
			}
			
		}
        .trv-hp5-bnr-baloon-bottom{
			position: absolute;  
			z-index: 6;
			bottom: 30px;
  			left: 800px;
			opacity: 0.5;
			animation: sld-30 2s linear infinite alternate-reverse;
			@include breakpoint-1440{
				max-width: 130px;
				left: 600px;
			}
			@include breakpoint-1024{
				max-width: 100px;
				left: 500px;
			}
			@include breakpoint-768{
				display: none;
			}
		}
        .trv-hp5-bnr-leaf-bottom{
			position: absolute;  
			z-index: 6;
			bottom: -60px;
			left: -20px;
			animation: swing 5s ease-in-out infinite alternate;
			@include breakpoint-1440{
				bottom: -30px;
				width: 190px;
			}
		}
	}
	.trv-hp5-bnr-sec-content{
		position: absolute;
		left: 0px;
		bottom: 0px;
		top: 0px;
		right: 0px;
		z-index: 5;
		@include breakpoint-1440{
			max-width: 1300px;
			background-position: top center;
		}
		@include breakpoint-1199{
			max-width: 900px;
			background-position: top center;
		}
		@include breakpoint-768{
			position: static;
			background-position: left;
		}
	}
	.trv-banner-5-text{
		padding-top: 100px;
		padding-left: 70px;
		max-width: 820px;
		@include breakpoint-1440{
			max-width: 720px;
		}
		@include breakpoint-1366{
			padding-left: 30px;
			padding-top: 90px;
		}
		@include breakpoint-1199{
			max-width: 630px
		}
		@include breakpoint-1024{
			max-width: 500px
		}
		@include breakpoint-991{
			padding: 90px 20px 0px;
		}
		@include breakpoint-768{
			padding: 30px;
			margin: 0px auto;
    		text-align: center;
		}
		@include breakpoint-420{
			padding: 20px;
		}
		.trv-banner-5-text-mid{position: relative;}
		.trv-banner-5-text-small{
			font-family: $font-style3;
			font-size: 60px;
			line-height: 70px;
    		color: $clr-primary;
			display: block;
			padding-left: 20px;
			@include breakpoint-1440{
				font-size: 40px;
			}
			@include breakpoint-1199{
				font-size: 28px;
			}
			@include breakpoint-991{
				padding: 0px;
			}
		}
		.trv-banner-5-text-large{
			font-family: $font-style3;
			font-size: 116px;
			line-height: 1.2;
			color: $clr-primary;
			margin-bottom: 20px;
			position: relative;
			display: inline-block;
			@include breakpoint-1440{
				font-size: 78px;
			}
			@include breakpoint-1024{
				font-size: 54px;
			}
			@include breakpoint-767{
				font-size:58px;
			}
			@include breakpoint-575{
				font-size:38px;
			}
			span{
				color: $clr-yellow;
			}
		}
		.trv-banner-text-detail{
			font-size: 22px;
			line-height: 30px;
			color: $clr-primary;
			position: relative;
			margin-bottom: 30px;
			padding-left: 20px;
			@include breakpoint-1440{
				font-size: 20px;
			}
			@include breakpoint-1199{
				font-size: 18px;
			}
			@include breakpoint-991{
				padding: 0px;
			}
			@include breakpoint-420{
				font-size: 15px;
    			line-height: 24px;
			}

		}
		.trv-banner-btn-wrap{
			display: flex;
			align-items: center;
			padding-left: 20px;
			@include breakpoint-768{
				padding-left: 0px;
			}
			@include breakpoint-575{
				display: block;
			}
		}
		.trv-banner-btn{
			position: relative;
			z-index: 4;
			margin-right: 30px;
			@include breakpoint-991{
				padding: 0px;
			}
			@include breakpoint-575{
				margin-right: 0px;
			}
		}
	}
	.trv-bnr-5-moreinf{
		display: flex;
		align-items: center;
		@include breakpoint-575{
			justify-content: center;
			margin-top: 20px;
		}
		.trv-wsp-media{
			margin-right: 10px;
			i{
				font-size: 36px;
			}
		}
		.trv-wsp-mor-info{
			color: $clr-primary;
			font-weight: 700;
			font-size: 18px;
			span{
				display: block;
				color: $clr-yellow;
				font-family: $font-style3;
				font-size: 24px;
				@include breakpoint-991{
					font-size: 18px;
				}
			}
		}
	}
}
.trv_hp5-slider{
	width: 100%;
	.trv_d-slider-media{
		overflow: hidden;
	}
	img{
		height: 760px;
		object-fit: cover;
		object-position: center;
		width: 100%;
		@include breakpoint-1366{
			height: 630px;
		}
		@include breakpoint-768{
			height: 330px;
		}
	}
}

@keyframes sld-30 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(30px);
  }
}
@keyframes sld-20 {
  0% {
     transform: translateY(0);
  }
  100% {
     transform: translateY(-20px);
  }
}


@keyframes swing {
	0% { transform: rotate(-5deg); }
	100% { transform: rotate(5deg); }
}


/** - Tv service style 1 start */

.trv-service-st2{
	background-color: $clr-light-yellow;
	padding: 120px 20px;
	@include breakpoint-1024{
		padding: 50px 0px;
	}
	.trv-service-back-bg{
		margin: 0px auto 60px;
		> .row{
			grid-gap: 24px 0px;
		}
		.trv-service-bx2{
			background-color: $clr-white;
			border-radius: 30px;
			padding: 15px;
			text-align: center;
			border: 1px solid rgba(6, 97, 104, 0.18);
			transition: $transition;
			.trv-media{
				margin-bottom: 20px;
				img{
					border-radius: 20px;
					width: 100%
				}
			}
			.trv-info{
				.trv-title{
					font-family: $heading-font;
					font-size: 28px;
					font-weight: 500;
					line-height: 1.2;
					margin-bottom: 0px;
					@include breakpoint-768{
						font-size: 22px;
					}
					a{
						color: $clr-primary;
						transition: $transition;
					}
				}
			}
			&:hover{
				box-shadow: none;
				background-color: $clr-primary;
				.trv-info{
					.trv-title{
						a{
							color: $clr-yellow;
						}
					}
				}

			}
		}
	}
}

.trv-btm-title-section2{
	position: relative;
	text-align: right;
	z-index: 1;
	span{
		color: $clr-primary;
		font-family:$heading-font;
		font-style: normal;
		font-weight: 700;
		font-size: 28px;
		@include breakpoint-768{
			font-weight: 500;
			font-size: 20px;
		}
	}
	.trv-btm-title-large{
		font-family: $font-style2;
		font-weight: 900;
		font-size: 80px;
		line-height:1;
		text-transform: uppercase;
		color: $clr-yellow;
		margin-bottom: 0px;
		@include breakpoint-991{
			font-size: 46px;
		}
		@include breakpoint-768{
			font-size: 30px;
		}
	}
}


/** - Video with acchivment section end */
.trv-vid-style5-wrap{
	height: 800px;
	overflow: hidden;
	position: relative;
	background-size: cover;
	@include breakpoint-1199{
		height: 500px;
	}
	@include breakpoint-991{
		height: 400px;
	}
	@include breakpoint-767{
		background-position: right;
	}
	.trv-vid-full{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		max-width: auto;
		object-fit: cover;
		width: 100%;
		height: 100%;
		margin: 0;
		z-index: 0;
	}
	.video-section{
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
	}
}

/*Price Box*/
.trv-price-bx5-wrap{
	position: relative;
	overflow: hidden;
	z-index: 1;
	.left-hot-ballon{
		position: absolute;
		left: -115px;
		top: 40%;
		width: 230px;
		animation: slide-top2 20s linear infinite alternate-reverse;
		z-index: -1;
	}
}