/* NS-transfer  main css*/

html {  scroll-behavior: smooth;}

* {  box-sizing: border-box;}

body { 
	margin:0px ; 
	font-family: "Radio Canada";
	font-size: 15px; color:#333;
	background-color: #F2F5F8;
}

:root {
	--clr: #00ce6e;
	--clr1: #8671FF;
	--clr2: #975757;
  }


/* Fonts  frm google */




H1 {font-size: 48px; font-weight: 700; color:#1B1B1B;}
H2 {font-size: 30px; font-weight: 600; color:#8671ff;}
H3 {font-size: 23px; font-weight: 500; color:#8671ff;}
H4 {font-size: 18px; font-weight: 500; color:#8671ff;}

P{font-size: 18px; font-weight: 400; color: #727579;}

.flx {display: flex;  flex-wrap: wrap;  justify-content: center;}

.button3 {padding: 10px 30px;    border: 1px solid #BBB;
    border-top-left-radius: 10px;   border-bottom-right-radius: 10px; 
	color: #FFF; font-size:medium; font-weight: 600;
    background-color: var(--clr);    text-decoration: none; transition: 0.3s;
}
	.button3:hover{background-color: #FFF; color: #806902;}

.section-title {
	font-family: "Kanit", sans-serif;
	font-weight: 700;	font-style: normal;
	color:var(--clr);	
	text-shadow: 1px 1px 0px #000, 0px 5px 5px rgba(100, 100, 100, 0.5);
	margin-bottom: 10px;
  }



.space-30 { 
	margin-top:30px;
	margin-bottom: 30px;
	padding-top: 30px;
}

.pad-top-60 { padding-top: 60px;}
.pad-bottom-60 { padding-bottom: 60px; }


.space-60 { 
	margin-top:30px;
	margin-bottom: 30px;
	padding-top: 20px;
}
.nospace {	
	margin-top:0px;
	margin-bottom: 0px;
	padding-top: 0px;
}

.container {	
	max-width: 1200px;
	margin:auto;
	text-align: center;
}

.space-popoular-bg {
	background-color: #eeeeff;	
	background-image: url("img/bg/ready/pattern_bg_3.png");
}

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

.presentation { 	
	padding-left: 2%; 
	padding-right: 2%;
	text-align: center;
	width : 80%;
	margin: auto;	
	animation-name: presentation-text;
	animation-duration: 4s;
 }

.presentation p{ 
	font-family: "Kanit", sans-serif;
	font-size: 20px;  font-weight: 500;
}

.presentImgDiv { width:260px; float: left}
.presentImgDiv img { width:100% }


 @keyframes animation-pres {
	0%   {left:0px; top:50px; opacity:0.0 }	
	50% {left:0px; top:0px; opacity:1; color:#FFC000 }
	100% { color: #333; }
  }
  
.pres-anim {  position : relative;
	animation-name: animation-pres;
    animation-duration: 10s;
	animation-delay: 1s;
	animation-fill-mode: both;	
}




/*-----	quotation   --------   */ 

#Container_for_inc_quot {
	border : 1px solid #999;
	border-radius: 5px;
	box-shadow: 0px 5px 10px #AAA;
	padding: 10px;
}


.quote-descri {
	width:70%;
	padding-left: 100px;
	
}

.quote-descri p {
	text-align: left;
	font-size: 25px; line-height: 25px; color: #888;
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-variant-caps:petite-caps;
	/*border: 1px solid #ddd; */
	border-radius: 10px;
	border-right:1px solid var(--clr1); border-bottom:1px solid var(--clr1);	
}


.quote-descri p:before {
	content: "\f138";
	font-family: FontAwesome;
	font-size: 40px; 	color:var(--clr1);   
	padding-left: 20px; padding-right: 20px;
	position: relative;	top:20px;    	
}
	

.second-line {	
	font-size: 15px; font-style: italic; color: #AAA;
	font-variant-caps:normal;
	/*background-color: #ff0; */
	padding-left: 80px;
}


.whatsapp-div { width:250px; margin:auto;}

/*-----	 Transfers Flex  box  --------   */ 

.other-transfer-quick {
	display: flex;  flex-wrap: wrap;
	justify-content: center;  
	margin-bottom: 50px;
}

.quickbox {
	padding: 15px; margin:5px;
	flex-basis: 30%;
	border: 2px solid #FFC000;
	border-radius: 5px;
	box-shadow: 1px 3px 1px rgb(107, 1, 107), 3px 5px 10px #AAA;
	font-size: 15px; font-weight: 600; color:#b67804;
	/*cursor: pointer;*/
	transition: 0.4s ease;  	
	
}

.xxquickbox:hover {
	background-color: #fde9ab;
	color:#000;
	border: 2px solid #ff9900;

}



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



.advantageSection {
	background: #111; 
	color:#FFF; 
}

.advantage-box { 
	text-align: center;	
	padding: 10px;
	border : 2px solid var(--clr); border-radius: 15px;
 	height:300px;		
}

.advantage-box h3{
	color:var(--clr);
	font-weight: 700;
}

	.advantage-box:hover i { 
		color:#FFF;
		transform: rotate(20deg);
	}
	.advantage-box:hover h3 { 
		color: #AAA;		
		transition: 0.5s ease;
	}


.advantage-box p {
	color:#bbb;	
	font-size: 16px;  
	font-weight: 500;
	transition: 1s ease;
}
.adva-imgdiv {
	width:80px; height:60px;
	margin:auto;
	/*background-color: #333; 
	transform:translateY(-30px);*/
	transition: 1s ease;
}
.adva-imgdiv i { 
	color:var(--clr) ;
	transition: 0.5s ease;	
}



/*  Vehicle fleet */



.car-box-conatiner{
	height: 400px;
	padding: 20px;
	background-color: #F2F5F8;
	display:flex;
	overflow:scroll;
	overflow-y: hidden; 
	
}

.xxcar-box{	height: 400px; 	display:inline-block;	background-color: #fff;
	margin:10px; border: 1px solid #AAA; border-bottom: 3px solid var(--clr);
	box-shadow: 3px 3px 3px #AAA;	}

.xxxcar-title {	text-align: center;	padding: 5px;
	color:#FFC000; background-color: #000; border: 2px solid #FFC000;
}

.xxcar-img { background-color: #f0fae4;	width:250px;	}
.car-box{	
 	height: 400px; width:350px; min-width: 250px;
	margin-right:30px;
	display:inline-block; 
}
.car-img img{	width:100%; }

.car-text {	padding: 20px;	color:#333;	font-size: 18px; font-weight: 500;	
}

.car-bags {
	margin: auto; width:80%;
	text-align: left;
	padding: 10px;
	color:#666;
	font-size: 13px; line-height: 25px;
}
.car-bags i { color:#FFC000; font-size: 18px; padding-right: 10px; text-shadow: 2px 2px 3px #333; }




/*  ______________REVIEWS ________________  */

.revbg {
	background-color: #EEEEFF; 
	/*background-image: url(img/bg/bg-style-reviews.png); */
}

.rev-box {
	position: relative;
	border:1px solid #FFC000; border-radius: 10px;
	box-shadow: 5px 5px 5px #AAA;
	margin : 5px;	padding: 15px;
	background-color: #fff;
}

.rev-boxo ::before { content: "opi" ; 	font-size: 50px;}


.rev-box i { color: #ff9900; }

.rev-title  {margin: 15px; color:#574f86; font-size: 20px; font-weight: 600; font-style: italic;}

.rev-txt {color:#96771d; }

.rev-descri { margin: 15px;	color: #666;
	font-size: 13px; line-height: 40px;
}

.corner-i { 
	position: absolute; top:10px; left:10px;
	font-size: 40px;
}







/*  --------    adapt for mobiles -----  */

 .row::after {  content: "";  clear: both;  display: table;}

 [class*="col-"] {  float: left;  padding: 15px;}
 [class*="colm-"] {  float: left;  padding: 7px;}
 [class*="colm3-"] {  float: left;  padding: 7px;}

		.col-25 {width: 25%;}          .col-33 {width: 33%;}
		.col-50 {width: 50%;}          
		/* .col-66 {width: 66%;}	.col-75 {width: 75%;}         .col-100 {width: 100%;} */

		.colm-25 {width: 25%;}          .colm-33 {width: 33%;} 		/* 50% sur mob */
		.colm-s-25 {width: 25%;}          .colm-s-33 {width: 33%;} 	
		.colm3-25 {width: 25%;}          .colm3-33 {width: 33%;}    /* 30% sur mob */ 

.showOnMobile {display: none } 

  /* For mobile tab or phones: */
 @media only screen and (max-width: 800px) { 
			 [class*="col-"] {		 width: 100%;		}
			 [class*="colm-"] {		 width: 50%;		}
			 [class*="colm-s-"] {	 width: 50%;		}
			 [class*="colm3-"] {	 width: 33%;		}	
			
	.showOnMobile {display: block } 

	
		H1 {font-size: 33px; }
		H2 {font-size: 26px; }
		H3 {font-size: 20px; }
		H4 {font-size: 15px; }
			 
	#other-transfers-quick > div {	
		flex-basis: 25%; font-size: 12px;	}	 

	.presentation { 	width:95%; }
	.presentation p{ font-family: "Kanit", sans-serif;
					     font-size: 16px;  font-weight: 500; }
	
	.presentImgDiv { width:130px; float: left}

	.whatsapp-div { width:170px; }

	.quote-descri p {font-size: 22px; }
	.quote-descri p:before { font-size: 40px; }
	.second-line {	font-size: 11px; }	
	
	.quickbox {	padding: 5px; margin:5px;
		flex-basis: 0%; font		
	}

}

  /* Only  phones 450 */
  @media only screen and (max-width: 490px) { 
		[class*="colm-s-"] {		 width: 100%;		}	

  }