// destination section css
.destination-section {
	padding-bottom: 100px;
	@include bp(lg) {
		margin-bottom: 0;
	}
	@include bp(smx) {
		padding-bottom: 60px;
	}
}
.destination-three-column {
	.row .row {
		margin: 0;
		[class*="col-"] {
			padding: 7px;
		}
	}
	> .row {
		margin: 0 -7px;
		> [class*="col-"] {
			padding: 0;
		}
	}
}
.destination-four-column {
	.row {
		margin: 0 -7px;
		[class*="col-"] {
			padding: 7px;
		}
	}
}
.overlay-desti-item {
	.desti-content {
		position: absolute;
		bottom: 10px;
		left: 10px;
		h3 {
			color: $light-color;
			margin-bottom: 4px;
			a {
				&:hover {
					color: $primary-color;
				}
			}
		}
	}
}
.desti-item {
	background-color: $light-color;
	box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 10%);
	padding: 8px;
	position: relative;
	.desti-image {
		position: relative;
		&:before {
			background-color: $title-color;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			opacity: 0.45;
		}
		.rating-start {
			position: absolute;
			top: 10px;
			right: 14px;
		}
	}
	.meta-cat {
		a {
			display: inline-block;
			font-family: "Raleway", Sans-serif;
			font-weight: 700;
	    	line-height: 1.2;
	    	text-transform: uppercase;
	    	@include transition(background-color 0.3s);
	    	&:hover,
	    	&:focus {
	    		color: $hover-color;
	    	}
		}
	}
	.bg-meta-cat {
		position: absolute;
		top: 30px;
		left: 30px;
		a {
			background-color: rgba($secondary-color, 0.85);
			color: $light-color;
			padding: 7px 24px;
			&:hover,
	    	&:focus {
	    		background-color: rgba($primary-color, 0.85);
	    		color: $light-color;
	    	}
		}
	}
	.rating-start span {
		&:before {
			color: $light-color;
		}
	}
	@include bp(lgx){
		.desti-image {
			img {
				width: 100%;
			}
		}
	}
}

.desti-content {
	padding: 20px;
	h3 {
		margin-bottom: 4px;
		a {
			&:hover {
				color: $primary-color;
			}
		}
	}
}

.btn-wrap {
	a {
		margin-top: 50px;
	}
	@include bp(smx) {
		a {
			margin-top: 20px;
		}
	}
}