html {
    height: 100%
}
/* body{
	background: #F3F3F3;
} */

.bg-dark {
    background-color: rgb(1 24 47) !important;
}

a {
    color: #0d6efd;
    text-decoration: none;
}
.footer a {
    color: #1ca8f5;
    text-decoration: none;
}
.footer ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer h6{
  color: #bfc4c9;
}

.footer ul li a{
      color: rgba(255,255,255,.55);
}

.masthead {
    width: 100%;
    height: auto;
    min-height: 35rem;
		background-color: #F3F3F3;
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 75%, #000000 100%), url(https://scontent.fkul14-1.fna.fbcdn.net/v/t1.0-9/86186749_1324056297782380_4750836052510375936_o.jpg?_nc_cat=107&_nc_sid=730e14&_nc_oc=AQlzk6gwJTuuZC-gbYnmdw-U3EdgQPoz0aBJcA608Bzq7MxJ-k8Uq_aoBx3q9pbbM5xO6LPsYfhQsYvlvA9lqGZe&_nc_ht=scontent.fkul14-1.fna&oh=7788b31…&oe=5F20F2FD); */
    /* background: linear-gradient(to top, rgb(1 16 29) 0%, rgba(0, 0, 0, 0.4) 75%, #ab7a0c9c 100%), url(https://www.merangjetty.com/new2022/contents/images/home/homebanner2.jpg); */
    /*background: url(https://www.merangjetty.com/new2022/contents/images/home/Redang-Merang.jpg);*/
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;

}

.homebanner .nav-pills .nav-link.active, .homebanner .nav-pills .show>.nav-link {
    color: #000;
    background-color: #ffa800;

}
.homebanner  .nav-pills .nav-link {
    border-radius:0;
}
.homebanner .nav-fill .nav-item .nav-link {
    border: 1px solid white;
}
.homebanner .nav-fill .nav-item .nav-link.active{
    border: 1px solid #ffa800;
}
.homebanner .nav-fill .nav-item a{
  color:white;
}

.form-control:focus, .form-select:focus, .btn-check:focus+.btn-primary, .btn-primary:focus, .select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #0b54bd;
    box-shadow: none;
}

.btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #0954bc;
}

input[type="radio"], select {
cursor: pointer;
}

.datepickers-container {
    z-index: 1666;
}

.header-title{
	font-weight:bold; margin-top: 12px;  font-size: 24px;
}
.container-fluid.container-custom, .container.container-custom{
	    padding: 20px 15px;
		min-height:480px;
}
.container.content {
    border: 1px solid #d9d9d9;
    padding: 15px;
}
.container.home,  .container.container-custom{
	background: #fff;
  /*  border: 1px solid #ddd;
	padding-top: 15px; */
}

.sidebar{
	padding-left: 80px;
}
.overlay {
    background: #bababa;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    z-index: 9999;
}
.image-loading{
  position: absolute;
  left: 50%;
  top: 50%;
}

.homebanner{
    min-height: 400px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.homesearch{
	min-height: 350px;
	background: rgba(28, 35, 38, 0.85);
	padding:15px;
	margin: 15px;
}
.home-tagline{
	position: absolute;     top: 32%;    left: 27%;     padding: 15px; background: #f5e14c;
}
footer.navbar {
	border-radius: 0px;
}
.icon-background4 {
    color: #f5e14c;
}

.icon-background6 {
    color: #fcb131;
}


/* breadcrumb select */
.breadcrumb-web {
	/*centering*/
	display: inline-block;
	box-shadow: 0 0 50px 1px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag;
}

.breadcrumb-web a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 20px;
    line-height: 37px;
	color: white;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 60px;
	background: #666;
	background: linear-gradient(#666, #333);
	position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb-web a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb-web a:first-child:before {
	left: 14px;
}
.breadcrumb-web a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
}

/*hover/active styles*/
.breadcrumb-web a.active, .breadcrumb-web a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.breadcrumb-web a.active:after, .breadcrumb-web a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb-web a:after {
	content: '';
	position: absolute;
	top: 0;
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb-web a */
	width: 36px;
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #666;
	background: linear-gradient(135deg, #666, #333);
	/*stylish arrow design using box shadow*/
	box-shadow:
		2px -2px 0 2px rgba(0, 0, 0, 0.4),
		3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
		5px - for rounded arrows and
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb-web a:last-child:after {
	content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb-web a:before {
	content: counter(flag);
	counter-increment: flag;
	/*some styles now*/
	border-radius: 100%;
	width: 25px;
    height: 25px;
    line-height: 24px;
    margin: 6px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #444;
	background: linear-gradient(#444, #222);
	font-weight: bold;
	text-align: center;
}


.flat a, .flat a:after {
	background: white;
	color: black;
	transition: all 0.5s;
}
.flat a:before {
	background: white;
	box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active,
.flat a:hover:after, .flat a.active:after{
	background: #ffa800;
}

/* end breadcrumb web */

.search-sidebar{
	padding:15px;
}
.homesearch .form-control, .homesearch .input-group-addon{
	border:0px;
	line-height: initial;
}
.homesearch .input-group{
	margin-bottom:14px;
}

.tooltip-inner {
    max-width: 300px !important;
}


.img-responsive{
	max-width: 100%;
	height:auto;
}

.borderless{
	border:none !important;
}

.td-caricons{
	width: 35px !important;
    padding: 0px !important;
}


/* THEME CUSTOME */
.navbar.bg-success {
    font-size: 16px;
    background-color: #0b5378 !important;
	background-image: url(../images/asfalt-light.png);
    border-top: 1px solid #bbb;
    border-radius: 0px;
	padding-bottom: 0px;
}
.navbar ul li.nav-item.active{
    border-bottom: 2px solid #ffa800;
}

.btn-danger {
    color: #fff !important;
    background-color: #f1332e !important;
    border-color: #d9534f;
}

.btn-primary.btn-custom {
    background-color: #095478 !important;
    border-color: #043b7b !important;
	min-height: 46px;
    padding: 12px 20px;
    border-radius: 10px;
}

.btn-book {
        background: #e0620f;
        border-color: #e0620f;
        color: #fff;
        padding: 13px 30px;
        border-radius: 50px;
        font-weight: 600;
    }

    .btn-book:hover {
        background: #c95108;
        border-color: #c95108;
        color: #fff;
    }

footer a {
    color: #4467c9  !important;
}

.bg-inverse {
    background-color: #0f2a40!important;
}

.btn-mybooking{
	margin-top: 25px;
}

.page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #f1332e;
    border-color: #f1332e;
}

.nav-tabs .nav-link {
    border: 1px solid #efefef;
    color: #efefef;
    padding: 5px;
    font-weight: bold;
    font-size: 14px;
}

.home .island1{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d5e6ea+0,a9dce8+45,71b794+100 */
	background: #d5e6ea; /* Old browsers */
	background: -moz-linear-gradient(left, #d5e6ea 0%, #a9dce8 45%, #71b794 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #d5e6ea 0%,#a9dce8 45%,#71b794 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #d5e6ea 0%,#a9dce8 45%,#71b794 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5e6ea', endColorstr='#71b794',GradientType=1 ); /* IE6-9 */
}
.home .island2{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#71b794+0,3ab27a+45,2bc47a+100 */
	background: #71b794; /* Old browsers */
	background: -moz-linear-gradient(left, #71b794 0%, #3ab27a 45%, #2bc47a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #71b794 0%,#3ab27a 45%,#2bc47a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #71b794 0%,#3ab27a 45%,#2bc47a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71b794', endColorstr='#2bc47a',GradientType=1 ); /* IE6-9 */
}
.home .island3{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2bc47a+0,1aba44+46,008400+100 */
	background: #2bc47a; /* Old browsers */
	background: -moz-linear-gradient(left, #2bc47a 0%, #1aba44 46%, #008400 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #2bc47a 0%,#1aba44 46%,#008400 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #2bc47a 0%,#1aba44 46%,#008400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2bc47a', endColorstr='#008400',GradientType=1 ); /* IE6-9 */
}

.select2-container--default .select2-results>.select2-results__options{
    max-height: 250px !important;
}

.select2-container--default .select2-selection--single {
    height: 34px;
    margin-bottom: 5px;
}

.datepicker-depart{ background: white !important;}
.datepicker-return{ background: white !important;}

.icon-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .icon-list li {
        display: flex;
        align-items: flex-start; /* important */
        gap: 10px;
        margin-bottom: 2px;
    }

    .icon-list .icon {
        font-size: 20px;
        line-height: 1.4;
        flex-shrink: 0; /* prevent icon shrinking */
    }

    .icon-list .text {
        line-height: 1.6;
    }

.floating-book-now {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #ff3b30;
    color: #fff;
    padding: 14px 18px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: 0.3s ease;
}

.floating-book-now:hover {
    background: #e02e24;
    transform: translateY(-2px);
    color: #fff;
}

@media screen and (min-width: 800px) {
	.main-logo {    width: 80px;}
	.searchform-datereturn{ padding-left: 2px; }
	.searchform-datedepart{ padding-right: 2px; }
	.searchform-adult{ padding-right: 0px; }
	.searchform-child{ padding-right: 0px; }
	.searchform-infant{ padding-left: 3px; }
	.searchform-senior{ padding-left: 3px; padding-right: 0px; }
	.searchform-oku{ padding-left: 3px; }
	.searchform-toddler{ padding-left: 3px; padding-right: 0px;  }

}

@media screen and (max-width: 480px) {
	.header-title{
		padding-left:40px; margin-top: 8px;  font-size: 16px;
	}
	.main-logo {
	    width: 100px;
	}
	.homesearch{
		padding:10px;
		margin: 0px;
		background: rgba(28, 35, 38, 0.5);
	}
	.container.home{
		padding:15px;
	}

    .homebanner{
		min-height: 0px;
		/*background-repeat: no-repeat !important;
		background-size: cover !important;
		background: #54a5ec !important;
		background: url(https://www.merangjetty.com/contents/images/home/banner-mobile.jpg)  !important; */
	}
	.home-tagline{
		position: absolute;     top: 30%;    left: 0;     padding: 15px; background: #f5e14c;
	}

	.btn-mybooking{margin-top: 0px;}
	select.selectpicker, .selectpicker option, .selectpicker optgroup { font-size:13px !important; }

	.select2-container--default .select2-results>.select2-results__options{
	    max-height: 400px !important;
	}

}