@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700;800;900&display=swap');
/*
font-family: 'Catamaran', sans-serif;
*/

html, body { width: 100%; height: 100%; margin:0; overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 {
	transition: .5s;
	margin: 0;
	line-height: 1.2;
	font-weight: 700;
	font-style: normal;
	font-family: 'Catamaran', sans-serif;
}
h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }

p {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	font-style: normal;
	font-family: 'Catamaran', sans-serif;
	-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
}

ol, li, ul { color: #3d3d3d; font-family: 'Catamaran', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.7; font-style: normal; }
small { font-family: 'Catamaran', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.0; }

a, a:visited {
	font-family: 'Catamaran', sans-serif;
	text-decoration: underline;
	cursor: pointer;
	color: #1f44b5;

	-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		 -ms-transition: all 0.2s;
		  -o-transition: all 0.2s;
			  transition: all 0.2s;
}
a:hover, a:focus, a:active { text-decoration: none; color: #000; outline: none; }



/* CUST_AMINATION
============================================================================================================================== */

@keyframes marquee-City {
	0% { background-position: 0; }
	100% { background-position: 2810px; } /* use -ve value to slide opposite direction. value to be the width of image for seemless flow */
}



/* NAVBAR
============================================================================================================================== */



/* SLIDER
============================================================================================================================== */

.slider-main { position: relative; z-index: 20; }

.slider-main .carousel-caption .logo { width: 250px; }
@media only screen and (max-width: 1199.50px) { .slider-main .carousel-caption .logo { width: 150px; } }

.slider-main .carousel-caption { top: 45%; left: 0; transform: translateY(-55%); text-align: left; width: 100%; }
@media only screen and (max-width: 1399.50px) { .slider-main .carousel-caption { top: 40%; } }

.slider-main .carousel-caption h3 { font-family: 'Catamaran', sans-serif; font-size: 38px; color: #2d1b5d; font-weight: 900; }
.slider-main .carousel-caption h6 { font-family: 'Catamaran', sans-serif; font-size: 20px; color: #2d1b5d; }
@media only screen and (max-width: 1199.50px) {
	.slider-main .carousel-caption h3 { font-size: 30px; }
	.slider-main .carousel-caption h6 { font-size: 18px; }
}
@media only screen and (max-width: 991.50px) {
	.slider-main .carousel-caption h3 { font-size: 18px; }
	.slider-main .carousel-caption h6 { display: none; }
}
@media only screen and (max-width: 767.50px) {
	.slider-main .carousel-caption h3 { display: none; }
}
@media only screen and (max-width: 399.50px) { .slider-main { display: none; } }



/* HEADER
============================================================================================================================== */

.wrap-header-logo {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 50px 30px 20px 30px;
	margin-top: -50px;
	/* margin: -50px auto 30px; */
	border-radius: 0 0 30px 30px;
	box-shadow: 0 0 10px rgba(44, 171, 252, 0.5);
}



/* FORMS
============================================================================================================================== */

label {
	font-family: 'Catamaran', sans-serif;
	font-weight: 400;
	font-size: 14px;
}
.form-control, .form-select {
	font-family: 'Catamaran', sans-serif;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	border: 3px solid #2d1b5d;
	background-color: #FFF;
	border-radius: 10px;
	padding: 10px 15px 10px 15px;

	-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		  -o-transition: all 0.2s;
		 -ms-transition: all 0.2s;
			  transition: all 0.2s;
}

.form-control:active, .form-control:hover, .form-select:active, .form-select:hover { border-color: #2cabfc; color: #000; }
.form-control:focus, .form-select:focus { border-color: #2cabfc; color: #000; -webkit-box-shadow: none; box-shadow: none; }

.table { font-family: 'Catamaran', sans-serif; }
input[readonly] { background-color: rgba(0, 0, 0, 0.1); }

.switch { position: relative; display: inline-block; width: 60px; height: 30px; text-align: left; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 30px;
	background-color: #ccc;
	box-shadow: 0 0 0 2px #777, 0 0 4px #777;
	border: 4px solid transparent;
	overflow: hidden;
	transition: 0.2s;
}
.slider:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #777;
	border-radius: 30px;
	transform: translateX(-30px);
	transition: 0.2s;
}
input:checked + .slider:before { transform: translateX(30px); background-color: limeGreen; }
input:checked + .slider { background-color: #FFF; box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen; }



/* BUTTONS
============================================================================================================================== */

.btn-main {
	font-size: 18px;
	font-weight: 900;
	font-style: normal;
	padding: 15px 35px 15px 35px;
	font-family: 'Catamaran', sans-serif;
	border-radius: 15px;
	-webkit-transition: all 0.4s ease-in-out;
		-moz-transition: all 0.4s ease-in-out;
		 -ms-transition: all 0.4s ease-in-out;
		  -o-transition: all 0.4s ease-in-out;
			  transition: all 0.4s ease-in-out;
}

.btn-main.sml { font-size: 14px; padding: 8px 20px 8px 20px; }
.btn-main.medm { font-size: 14px; padding: 12px 20px 12px 20px; }

.btn-main.unfill { background-color: #FFF; color: #e51313; border: 3px solid #e51313; }
.btn-main.unfill:hover { background-color: #e51313; color: #FFF; }
.btn-main.full { width: 100%; }

.btn-main.blue { background-color: #2cabfc; color: #FFF; border: 3px solid #1d4688; }
.btn-main.blue:hover { background-color: #FFF; color: #2d1b5d; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.btn-main.green { background-color: #15a623; color: #FFF; border: 3px solid #05550c; }
.btn-main.green:hover { background-color: #FFF; color: #05550c; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.btn-main.red { background-color: #850900; color: #FFF; border: 3px solid #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.btn-main.red:hover { background-color: #FFF; color: #850900; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.btn-main.gold { background-color: #ffc400; color: #000; border: 3px solid #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.btn-main.gold:hover { background-color: #FFF; color: #000; border: 3px solid #ffc400; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }



/* FOOTER
============================================================================================================================== */

footer {
	padding-top: 50px;
	padding-bottom: 0;
	margin-bottom: 0;
	background-color: rgba(240, 251, 255, 1.0);
}

footer p {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}
footer small {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

footer .logo { width: 180px; margin: 0 auto; }

footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }


/* OTHERS
============================================================================================================================== */

.title h1, .title h2, .title h3 { color: #2d1b5d; }
.title h4, .title p { color: #2cabfc; }
.agentToken, .loginToken { display:none; }
.BG-transparent { background: transparent; }
.BG-blue-d { background-color: #2d1b5d; }
.BG-blue-l { background-color: #def9ff; }
.shadow-blue { box-shadow: 0 0 25px 3px rgba(193, 241, 255, 1.0); }


.BG-City {
	background-image: url("../imgs/BGs/BG-2.png");
	background-repeat: repeat;
	animation: marquee-City 50s infinite linear;
}
.BG-City-static {
	background: url('../imgs/BGs/BG-2.png');
	background-position: center top;
	background-repeat: repeat-x;
	background-size: contain;
}
.BG-KL-light {
	background: url('../imgs/BGs/BG-4-1.png');
	background-position: center bottom;
	background-repeat: repeat-x;
	background-size: contain;
}
.BG-Blue {
	background: url('../imgs/BGs/BG-5.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


.wrap-badgeFastCheap { position: relative; z-index: 25; margin-top: -100px; }
.wrap-imgCarBike { position: relative; z-index: 25; margin-top: -140px; }
@media only screen and (max-width: 1199.50px) { .wrap-imgCarBike { margin-top: -120px; } }
@media only screen and (max-width: 991.50px) { .wrap-imgCarBike { margin-top: -90px; } }
@media only screen and (max-width: 767.50px) {
	.wrap-badgeFastCheap { width: 200px; float:right; }
	.wrap-imgCarBike { display: none; }
}
@media only screen and (max-width: 575.50px) { .wrap-badgeFastCheap { margin: -100px auto; float: none; } }
@media only screen and (max-width: 399.50px) { .wrap-badgeFastCheap { margin: 50px auto; } }


.card-options {
	border-radius: 20px;
	border: 1px solid #2cabfc;
	transform: scale(0.95);

	-webkit-transition: all 0.4s ease-in-out;
		-moz-transition: all 0.4s ease-in-out;
		 -ms-transition: all 0.4s ease-in-out;
		  -o-transition: all 0.4s ease-in-out;
			  transition: all 0.4s ease-in-out;
}
.card-options:hover {
	margin-top: -20px;
	margin-bottom: 0;
	transform: scale(1);
	border: 4px solid #2cabfc;
}
.card-options h4 { color: #2d1b5d; }
.card-options p { color: #2cabfc; }

.card-options.green { border: 1px solid #15a623; }
.card-options.green:hover { border: 4px solid #05550c; }

.card-options.Dblue { border: 1px solid #2d1b5d; }
.card-options.Dblue:hover { border: 4px solid #2d1b5d; }

.wrap-logos { position: relative; width: 130px; margin: 0 auto; }


.card-testimonial { border-radius: 10px; border: 4px solid #2cabfc; background: transparent; }
.card-testimonial h5, .card-testimonial p { color: #FFF; }


.wrap-top-icon { margin-top: -70px; }
@media only screen and (max-width: 991.50px) { .wrap-top-icon { margin-top: -45px; } }
@media only screen and (max-width: 767.50px) { .wrap-top-icon { margin-top: 100px; } }
.div-title-icon { max-width: 450px; margin: -20px auto; }
@media only screen and (max-width: 499.50px) { .div-title-icon { display: none; } }