/* special CSS for Loading Image when loading body */
	/* Masquer tout le contenu du body */
body.hidden {
	visibility: hidden;
}

.bodybackground{
	background-image: url(../img/lightblue-bg.jpg)
}

/* Centrer l'image GIF d'attente */
.loadingbody {
	background-color:#dad5bb;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Transforme le texte en minuscules à l'affichage */
input[type="email"] {
	text-transform: lowercase;
}

/* PROBLEMES DE SURBRILLANCE SUR LES SMARTPHONES : Modifier la couleur de surbrillance du texte sélectionné */
::selection {
	background: #ffcc00; /* Couleur de fond lors de la sélection */
	color: #000; /* Couleur du texte lors de la sélection */
}

/* Modifier la couleur de surbrillance des liens de téléphone au focus */
a[href^="tel:"]:focus,
a[href^="tel:"]:active {
	background-color: #ffcc00; /* Couleur de fond lors du focus/active */
	color: #000; /* Couleur du texte lors du focus/active */
	text-decoration: none; /* Enlever le soulignement */
}

/* Pour améliorer la compatibilité avec différents navigateurs mobiles */
a[href^="tel:"] {
	-webkit-tap-highlight-color: #ffcc00; /* Couleur de surlignage pour Safari sur iOS */
}

/* Pour désactiver une div ou un bouton */
.disabled {
  pointer-events: none;
  opacity: 0.5;
}



/* special font for Application title */
@font-face {
  font-family: Kabut Hitam;
  src: url('../font/Kabut Hitam.ttf');
  font-weight: bold;
}

.logohb {
	padding-left:0px!important; 
	margin-bottom:0px!important;
	cursor:pointer;
}

.logoimage{
 height: 60px; 
 width:auto:
}

.logofont {
	font-family: Kabut Hitam;
	font-size: 80px;
	color: #333;
	line-height: 60px;
	vertical-align: middle;
}

.tagline {
	font-weight: 500;
	font-family: 'Roboto',sans-serif;
	font-size: 14px;
	color: #454545;
	line-height: 1.5rem;
	text-align: center;
}
.taglinetext {
	font-family: 'Roboto',sans-serif;
	font-size: 12px;
	color:#999;
}

.arrow-active, .arrow-disabled{
/*	background-image:url('../img/chevron_forward_36.png'); */
	display:inline-block!important;
	width:40px;
	height:40px;;
	background-color:#efefef;
	padding:5px;
	border-radius:50%;	
	cursor:pointer;
}

.arrow-disabled{
	display:none!important;
/*	background-color:#fafafa;
	cursor:default; */
}

.arrow-active:hover{
	color:#333;
	background-color:#a9cae8;
}

@media (max-width:767px) {

 .taglinetext {
	font-weight: 400!important;
	font-size: 12px;
	}
.arrow-active, .arrow-disabled{
	width:30px;
	height:auto;
}

}

.fullpageheight{
	min-height: calc(100vh - 75px - 175px);
}
.fullpageheight2{
	min-height: calc(100vh - 75px - 300px);
}

.sm-only{
	display: none;	
}

@media only screen and (max-width: 900px) {
	.logoimage{
 	height: 45px; 
}
	.logofont {
	font-size: 40px;
	line-height: 40px;
}

	.tagline {
	font-weight: 400;
	font-size: 12px;
	margin-left: 0.5rem;
}
	.logohb{
	padding-left:0!important;	
}
	
  .sm-only{
	display: flex;
}

	.fullpageheight{
	height: auto;
	margin-top:1rem;
	margin-bottom:1rem;
}
}


.headline {
	font-size: 40px;
	margin: 30px auto;
	line-height: 5rem;
}

.topline {
	font-size: 20px;
	letter-spacing: normal;
	font-weight: normal;
}

.subline, .subline-small {
	font-weight: 500;
	font-family: 'Roboto',sans-serif;
	font-size: 18px;
	color: #454545;
}

.subline-small{
	font-size: 14px;
}

blockquote {
  margin-left: 1rem;
}

.custom-list {
	list-style: none;
	padding-left: 0;
	color:#333!important;
}
.custom-list li {
	margin-bottom: 15px;
}

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

.description {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center; /* Ajouté pour centrer le texte par défaut */
}

.description a {
	display: block;
}

.rounded-img {
	max-width: 60%; /* Assure que les images ne dépassent pas leur conteneur */
	height: auto; /* Maintient les proportions des images */
	border-radius:5px;
	max-width: 300px; /* Vous pouvez ajuster la largeur maximale si nécessaire */
	object-fit: cover; /* Assure que les images s'adaptent au conteneur sans déformer */
}

.subline-small {
	margin-top: 1rem; /* Ajoute un espace au-dessus du texte */
}

@media (max-width: 767.98px) {
	.description {
		flex-direction: row-reverse;
		align-items: center;
	}
	.description-text {
		width: 50%;
		text-align: left;
		padding-right: 1rem;
	}
	.rounded-img {
		width: 50%;
	}
}

.hb-pricing, .hb-pricing-free {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #fff;
	background-color: #3481c5;
	border-radius: 50%;
	/* line-height: 1.2; */
	width: 100px;
	height: 100px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

  .pricing-star {
	  position: relative;
  }
  .pricing-star::before {
	  content: '*';
	  color: red;
	  font-size: 20px;
	  margin-right: 5px;
	  position: absolute;
	  left: -20px;
	  top: -10px;
  }

@media only screen and (max-width: 600px) {

.headline {
	font-size: 24px;
	margin-bottom: 10px;
	margin-top: 10px;
	line-height: 2rem;
}
.topline {
  font-size: 16px;
  letter-spacing: normal;
  font-weight: normal;
}
.subline, .subline-small {
	font-weight: 500;
	font-size: 14px;
}
}

/* change the background color */
.navbar-custom {
    background-color: #005888;
	padding:1rem 1rem 1.5rem !important;
}

/* Align items vertically */
.navbar-nav {
  display:flex;
  align-items:center;
}

.nav-link-mainmenu{
	padding-left: 30% !important;
}

@media only screen and (max-width: 600px) {
  .navbar-nav {
	display:flex;
	margin-top:1.0rem;
	align-items:left;
  }
  
  .nav-link-mainmenu{
	padding-left: 0 !important;
}

}

/* Blank Page, content-wrapper */
.blank-page .content-wrapper .flexbox-container {
    display: flex;
    align-items: center;
    height: calc(var(--vh, 1vh) * 100);
}
/* End Blank Page, content-wrapper */

.blank-page .content-wrapper {
    padding: 0 !important;
}

/* Error Messages */
.alert[class*="bg-"] .close {
    color: #fff;
    opacity: 1;
    text-shadow: none;
}

.alert .close {
    font-size: 1.1rem;
    line-height: 1rem;
}

.alert .errormsg {
	   color: #fff;
}

@media only screen and (max-width: 600px) {
  .alert .errormsg {
	 font-size:12px;
	 line-height:14px;
  }
}

button, html [type="button"], [type="reset"], [type="submit"] {
    cursor: pointer;
}

.float-right {
  float: right !important;
}

.float-left {
  float: left !important;
}

/* End Error Messages */

/* Form Control  */

/* Bouton Demarrer  */
.btn_start.btn-primary, .btn_start.btn-primary:hover {
	background-color: #3481c5;
	border-color: #3481c5;
	color: #fff;
	box-shadow: none;
}

.btn_start {
	display: inline-block;
	font-weight: 400;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	transition: color .15s ease-in-out , background-color .15s ease-in-out , border-color .15s ease-in-out , box-shadow .15s ease-in-out;
}

.btn_start {
	border-radius: 60px;
	padding: 0 50px;
	min-width: 200px;
	height: 64px;
	line-height: 62px;
	text-align: center;
	font-family: 'Roboto',sans-serif;
	font-size: 22px;
	white-space: nowrap;
	background-color: #fff;
	border-color: #e2e2e2;
	color: #000;
	overflow: hidden;
	max-width: 100%;
}


.btn-custom, .btn-custom-grey {
  background-color: #3481c5;
  border: none; 
  color: white; 
  padding: 8px 16px 8px 16px;
  font-size: 14px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

.btn-custom-grey {
  background-color:transparent;
  color: #666;
  border: 1px solid #ced4da;
}

/* Darker background on mouse-over */
.btn-custom:hover {
  background-color: #245B8B;
  color: white!important;
}
.btn-custom-grey:hover {
  background-color: rgb(248, 249, 250) !important;
  color: #333;
}




/* Cards ----------- */
.box-shadow-2 {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card {
    margin-bottom: 1.875rem;
    border: none;
    border-radius: 0;
    box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
}
.card-header {
    padding: 1.5rem 1.5rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.card-header {
    border-bottom: none;
}
.card-header .card-title {
    margin-bottom: 0;
}

.card .card-title {
    text-transform: uppercase;
    font-weight:600;
    letter-spacing: 0.05rem;
    font-size:1.5rem;
	line-height:4.5rem;
	color:#fff;
}

.card-title-legal{
	 text-transform: uppercase;
    font-weight:600;
    letter-spacing: 0.05rem;
    font-size:1.2rem;
	line-height:2.0rem;
	color:#333;
}

.card-link {
	font-size: 12px !important;
	color: #6eb3e0!important;
}

.ul-legal {
	color: #333 !important;
	font-size: 13px;
	padding-left: 1.2rem;
}
@media only screen and (max-width: 600px) {
	.card-header {
    padding: 1.1rem 1.1rem;
	}	
	.card .card-title {
    font-size:12px;
	line-height:14px;
	}
	.card-text{
	font-size:12px;	
	}
	.card-title-legal{
	font-size:12px;	
	}
}

.card-title {
    margin-bottom: 1.5rem;
}

.card-link {
    color: #6eb3e0;
}
.card-link:hover {
    color: rgba(0,156,234,1);
}
/* End Cards ----------- */

/* Start Tabs ---------------- */
.content {
	max-width: 800px;
}

.tab_size{
	min-width: 700px;
	max-width: 860px;
}

@media (max-width: 768px) {
	.tab_size{
	min-width: none;
	}
}

/* Navbar ---- */
.navbar-dark .navbar-toggler {
    color: #005888;
    border:0 !important;
}

.navbar-toggler {
    padding:0  !important;
    background-color:transparent;
    border:0 !important;
}

.navbar-toggler:hover, .navbar-toggler:active, .navbar-toggler:focus{
	background-image: url('../img/ListMenu24_2Hover.png') !important;
}
.navbar-toggler:hover{
	background-image: url('../img/ListMenu24_2Hover.png') !important;
}

.close-icon:hover, .close-icon:active, .close-icon:focus {
     background-image: url('../img/closeIcon24Hover.png') !important;
}

.navbar-toggler-icon {
     background-image: url('../img/ListMenu24_2.png') !important;
	 background-repeat: no-repeat;
	 border: none;
     outline: none;
	 width:22px;
	 height:22px;
}

.close-icon {
     background-image: url('../img/closeIcon24.png') !important;
	 background-repeat: no-repeat;
	 border: none;
     outline: none;
	 border-color:transparent;
	 width:22px;
	 height:22px;
}

/* hide close when burger shown */
.navbar-toggler.collapsed .close-icon {
    display: none;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    display: inline;
}

.navbar-dark .navbar-nav .nav-link {
    color: #FFFFFF !important;
}

/* Scroll up */
.scrollup {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    text-indent: -9999px;
    background: url('icon_top.png') no-repeat;
    background-color: #000;
}

/* Buttons */

.btn-outline-primary {
/*	font-size:1.2rem; */
  	border-color: #6eb3e0;
  	background-color: transparent;
  	color: #6eb3e0; }

.btn-outline-primary:hover, .btn-outline-primary-selected {
	border-color: #6eb3e0;
	background-color: #6eb3e0;
	color: #FFF !important; }


.freetrial, .loginbtn, .signupbtn {
	--tw-text-opacity: 1;
	color: rgba(255,255,255,1);
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: .75rem;
	padding-bottom: .75rem;
	--tw-bg-opacity: 1;
	background-color: #3481c5;;
	border-radius: .375rem;
	align-items: center;
	display: inline-flex;
	white-space:nowrap;
}

.signupbtn{
	background-color: #f8c761;
}

.learnmore{
	color: #333;
	margin-left:70px;
}
.learnmore:hover{
	background-color: #efefef;
	color:#3481c5;
}
.learnmorebtn{
	width: 24px;
	height:auto;
}
.learnmoretitle{
	font-size: 25px;
	text-align:center;
}
.learnmoretext{
	font-size: 14px;
	line-height: 1.8;
}
.learnmorestep {
  background-color: #3481c5;
  border: none;
  color: white !important;
  padding: 4px 8px 4px 8px;
  font-size: 11px;
  border-radius:3px;
}

.freetrial:hover, .loginbtn:hover, .signupbtn:hover {
	opacity: 0.8;
	color: rgba(255,255,255,1);
}

.ulclass{
	color:#333!important;
	list-style: none; /* Remove default list styling */
    padding: 0;
}
.ulclass li {
	position: relative;
	padding-left: 30px; /* Add space for bullet */
	margin-bottom: 10px; /* Space between list items */
	line-height: 1.5; /* Adjust line height for better alignment */
}
.roundstep{
	position: absolute;
	left: 0;
	top: 0;
  /*  transform: translateY(-50%); */
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #f8c761;
	color:#ffffff;
	text-align: center;
	line-height: 20px;
	font-size: 12px; /* Adjust font size for better fit */
}

@media only screen and (max-width: 900px) {
	.freetrial, .loginbtn, .signupbtn {
		font-size:14px;
	}
	.learnmore{
		margin-left:10px;
	}
	.learnmoretitle{
	font-size: 20px;
	}
	.learnmoretext{
	font-size: 12px;
	}
	
}



/* Registration and Contact page */
.registration-page {
	height: 100%;
	justify-content: center;
/*	background-image: url('../img/LightBlue-bg.jpg');	*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* End Registration page */

.login{
	 --tw-text-opacity: 1;
    color: rgba(31,41,55,var(--tw-text-opacity));
	font-weight: 500;
	padding-left: 1.25rem;
    padding-right: 1.25rem;
	padding-top: .75rem;
    padding-bottom: .75rem;
	border-radius: .375rem;
	border:1px solid #ddd;
	align-items: center;
	display: inline-flex;		  
}

.navlinkstd {
	color: rgba(123,144,154,1);
	white-space: nowrap;
}

.navlinkstd-focus {
	color: #3481c5;
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgba(123,144,154,var(--tw-text-opacity));
}

.transition {
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.text-strong{
	font-weight: bolder;
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgba(31,41,55,var(--tw-text-opacity));
}
.font-500 {
    font-weight: 500;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.border {
    border-width: 1px;
}
.rounded-md {
    border-radius: .375rem;
}
.items-center {
    align-items: center;
}
.inline-flex {
    display: inline-flex;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgba(243,244,246,var(--tw-bg-opacity));
}

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(243, 244, 246);
}


.mt-auto {
    margin-top: auto;
}

.form-group label:not(.error) {
	font-family: poppins,sans-serif !important;
	font-size: 12px !important;
	letter-spacing: .08em !important;
	font-weight: 400;
/*	margin-bottom: 4px;  */
	color: #777;
}

label {
	font-family: poppins,sans-serif !important;
	display: inline-block;
/*	margin-bottom: .5rem;	*/
	color: #3481c5;
}

.label-input{
	font-family: poppins,sans-serif !important;
	font-size: 12px !important;
	letter-spacing: .08em !important;
	font-weight: 400;
	color: #777;
	display: inline-block;
	border:none!important;
	width:auto;
	min-width:200px;
	margin-bottom:2px;
	
}
.label-input:hover{
	border-radius:3px;
	background-color:#efefef;
	cursor:url(/assets/img/pencil-cursor.png) 5 5, pointer;
}

.label-input:focus{
	background-color:#fafafa;
	border:1px solid #ccc;
	border-radius:3px;
	cursor:default;
}




.text-gray {
	color: #3481c5;
}

.text-uppercase {
	letter-spacing: 0.1em;
}

/* Champ téléphone formaté */
  input[type="tel"] {
	  padding: 10px;
	  font-size: 1em;
  }


/* Tooltip styles */

.tooltip .arrow:before {
    border-top-color: #666 !important;
}

.tooltip .tooltip-inner {
    background-color: #666;
}

/* Tooltip styles */


/* Icon popover "information" */
div.popover-content {
	color: #444;
	font-size: 15px;
	line-height: 22px;
	padding: 15px 20px;
	font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Button DisplayMore */
.display-more{
	border:1px solid #ccc;
	border-radius:3px;
	background-color:transparent;
	color:#454545;
	font-size:10px;
}
.display-more:hover{
	background-color:#efefef;
	font-weight:700;
}

.icon_default_color {
	color: #3481c5;
	transition: 0.3s;
}
.fa-info-icon {
	font-size: 16px;
	position: relative;
	top: 1px;
}
.click_more_info {
	cursor: pointer;
	/* border: solid 1px #999; */
	/* border-radius: 21px; */
	/* padding: 1px 2px; */
}


/* Loading Image ----------- */
.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* End Loading Image ----------- */