@media (min-width: 1200px) {
    .container {
        max-width: 1190px !important;
    }
}

/*beadcrumbs*/

/* Add the 'icon-arrow-right' as a separator between breadcrumb items */
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f105"; /* Unicode for the 'icon-arrow-right' (replace with the actual Unicode for your icon) */
    font-family: "FontAwesome"; /* Make sure you're using the correct font family for your icon library */
    margin: 0 8px; /* Adjust space between items */
}

/* Optional: style the breadcrumb links */
.breadcrumb-item a {
    text-decoration: none; /* Remove underline */
}

.breadcrumb-item a:hover {
    text-decoration: underline; /* Optional: underline on hover */
}

/*beadcrumbs*/

/*hp*/

.servicesimg{
	border-radius:15px 15px 0px 0px;
	width:90%;
}

.benefitsmainimg{
	border-radius:15px;
}

.benefitsnumber{
    background-color:#00aaef;
	border-radius:15px;
	color:#fff;
	width:30px;
	height:30px;
	text-align: center;
	font-size:18px;
}

/* .contactbox{
	width: 880px;
}

@media (max-width: 767px){
	.contactbox{
		width:auto;
	}
}	 */

.contactboxbg{
	background-image: linear-gradient(315deg, #02A9D6 0%, #033AAF  74%);
	background-color: #F6F6F8!important;
}

.contactboxshadow{
	box-shadow: 0px 0px 17px -1px rgb(0 0 0 / 9%);
}

.styleboxhp { border-radius: 0px 0px 15px 15px !important;
    box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.09);
}

.card {
  position: relative;
}
.main-link::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.styleboxhp:hover {transform: scale(1.01) !important; transition: all .3s ease !important; border-radius: 15px !important;}

/*hp*/

/*hubs*/

.connectivitytabs a{
	color: #000;
}

.connectivitytabs a:active{
	color:#000;
	font-weight: 600;
	border-bottom: 3px solid #000;
}

.connectivitytabs a.btn:active{
	color:#000!important;
	font-weight: 600;
}

a.btn.active {
    color: #000 !important;
    font-weight: 600;
    border-bottom: 3px solid #000;
}

.tab-content {
  transition: opacity 0.3s ease;
}

.tab-pane.active {
  display: block;  /* Show the active tab's content */
  opacity: 1;
}

.tab-title {
  cursor: pointer;
}

.tab-title.active {
  font-weight: bold;
  color: #0056b3;
}

.btn-outline {
    color: #000;
    border-color: #000;
    background-color: transparent;
}

.btn-outline:hover {
    color: #fff;
    border-color: #ffa400;
    background-color: #ffa400!important;
}

.offersimage{
	border-radius: 15px !important;
}

/*hubs*/


/*inner*/


/*inner*/


/* .custombreadcrumb{
    display: inline-flex;
	list-style: none;
	color: white;
	/* white-space: nowrap; */
/*}

.custombreadcrumb-item + .custombreadcrumb-item::before {
    content: "\f105";
    font-family: "FontAwesome";
    margin: 0 8px;
}

.custombreadcrumb-item+.custombreadcrumb-item::before {
    display: inline-block;
    /* padding-right: .5rem; */
/*    color: white;
    content: U+003E;
} */

.breadcrumb1{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    /* background-color: #e9ecef; */
    border-radius: .25rem;
}

/* Add the 'icon-arrow-right' as a separator between breadcrumb items */
.breadcrumb-item1 + .breadcrumb-item1::before {
    content: "\f105"; /* Unicode for the 'icon-arrow-right' (replace with the actual Unicode for your icon) */
    font-family: "FontAwesome"; /* Make sure you're using the correct font family for your icon library */
    /* margin: 0px 5px 0px 10px; */ /* Adjust space between items */
}

/* Optional: style the breadcrumb links */
.breadcrumb-item1 a {
    text-decoration: none; /* Remove underline */
}

.breadcrumb-item1 a:hover {
    text-decoration: underline; /* Optional: underline on hover */
}

.breadcrumb-item1+.breadcrumb-item1::before {
    display: inline-block;
    /* padding-right: .5rem; */
	padding-left: .5rem;
    color: #fff;    
}

/* .modal-custom {
    width: 100% !important;
    height: 70% !important;
    position: absolute;
    bottom: 0%;
    border-radius: 20px 20px 0px 0px;
	background-color:#F9F9F9;
} */

.modal-custom2 {
    width: 100% !important;
    height: 30% !important;
    position: absolute;
    bottom: 0%;
    border-radius: 20px 20px 0px 0px;
	background-color:#F9F9F9;
}


/*tooltipnew*/

/* Tooltip container */
.tooltip1 {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip1 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background: #444444 none repeat scroll 0 0;
  color:#fff;
  border: 1px solid #444444;
  text-align: left;
  border-radius: 6px;
  font-size: 16px;
  padding: 3px 10px;
  position: absolute;
  right: 5px;
  top: 45px;
  width: 330px;
  opacity: 2.9;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip1:hover .tooltiptext {
  visibility: visible;
}

.tooltip1 .tooltiptext2 {
  visibility: hidden;
  width: 120px;
  background: #444444 none repeat scroll 0 0;
  color:#fff;
  border: 1px solid #444444;
  text-align: left;
  border-radius: 6px;
  font-size: 16px;
  padding: 3px 10px;
  position: absolute;
  right: 5px;
  top: 45px;
  width: 330px;
  opacity: 2.9;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip1:hover .tooltiptext2 {
  visibility: visible;
}

/*tooltipnew*/

@media (max-width:767px) {
	/* .servicestitle{
		min-height:85px;
	} */
	.modal-custom{
		width: 100% !important;
		height: 100% !important;
		position: absolute;
		bottom: 0%;
		border-radius: 20px 20px 0px 0px;
		background-color:#F9F9F9;
	}
	.tooltip1 .tooltiptext {
	  visibility: hidden;
	  width: 120px;
	  background: #444444 none repeat scroll 0 0;
	  color:#fff;
	  border: 1px solid #444444;
	  text-align: left;
	  border-radius: 6px;
	  font-size: 14px;
	  padding: 3px 10px;
	  position: absolute;
	  right: -60px;
      top: -40px !important;
      width: 275px !important;
	  opacity: 2.9;
	 
	  /* Position the tooltip text - see examples below! */
	  position: absolute;
	  z-index: 1;
	}
	.tooltip1 .tooltiptext2 {
	  visibility: hidden;
	  width: 120px;
	  background: #444444 none repeat scroll 0 0;
	  color:#fff;
	  border: 1px solid #444444;
	  text-align: left;
	  border-radius: 6px;
	  font-size: 14px;
	  padding: 3px 10px;
	  position: absolute;
	  right: -145px !important;
      top: 60px !important;
      width: 275px !important;
	  opacity: 2.9;
	 
	  /* Position the tooltip text - see examples below! */
	  position: absolute;
	  z-index: 1;
	}
}


.custom-boxshadow {
    box-shadow: 1px 3px 10px rgb(0 0 0 / 25%);
} 

.custom-buttonbusiness { 
    border: none;
    background: #FFBB41;
    /* orangeversion: background: linear-gradient(148deg, rgba(255, 187, 65, 1) 0%, rgba(222, 125, 0, 1) 100%); */	
	/* blue version1: background: radial-gradient(circle farthest-corner at 10% 20%, rgb(6 169 196) 15.6%, rgba(0, 163, 217, 1) 35.9%, rgba(0, 105, 148, 1) 81%); */
	background: radial-gradient(circle farthest-corner at 10% 170%, rgb(6 169 196) 15.6%, rgba(0, 163, 217, 1) -54.1%, rgba(0, 105, 148, 1) 101%);
	/* background: linear-gradient(148deg, rgb(124 124 124) 0%, rgb(28 28 28) 100%); */
    box-shadow: 0px 7px 20px rgba(51, 51, 51, 0.1);
}

.custom-buttonbusiness:hover { 
    border: none;
    background: #FFBB41;
    /* orangeversion: background: linear-gradient(148deg, rgba(222, 125, 0, 1) 0%, rgba(255, 187, 65, 1) 100%); */
	/* blue version1:  background: radial-gradient(circle farthest-corner at 10% 20%, rgb(0, 105, 148, 1) 15.6%, rgba(0, 163, 217, 1) 35.9%, rgba(6 169 196) 81%);*/
	background: radial-gradient(circle farthest-corner at 10% 20%, rgb(0, 105, 148, 1) -53.4%, rgba(0, 163, 217, 1) 99.9%, rgba(6 169 196) 81%);
	/* background: linear-gradient(148deg, rgba(28 28 28) 0%, rgba(124 124 124) 100%); */
    box-shadow: 0px 7px 20px rgba(51, 51, 51, 0.1);
	font-weight:bold;
}

.custom-buttonbusiness-ordernow { 
    border: 2px solid #000;
    color:#000!important;
}

.custom-buttonbusiness-ordernow:hover { 
    border: none;
    background: #FFBB41;
    /* orangeversion: background: linear-gradient(148deg, rgba(255, 187, 65, 1) 0%, rgba(222, 125, 0, 1) 100%); */	
	/* background: radial-gradient(circle farthest-corner at 10% 20%, rgb(6 169 196) 15.6%, rgba(0, 163, 217, 1) 35.9%, rgba(0, 105, 148, 1) 81%); */
	background: radial-gradient(circle farthest-corner at 10% 20%, rgb(0, 105, 148, 1) -53.4%, rgba(0, 163, 217, 1) 99.9%, rgba(6 169 196) 81%);
	
	/* background: linear-gradient(148deg, rgb(124 124 124) 0%, rgb(28 28 28) 100%); */
    box-shadow: 0px 7px 20px rgba(51, 51, 51, 0.1);
	color:#fff!important;
}

.custom-buttonbusiness-applynow { 
    border: 2px solid #fff;
    color:#fff!important;
}

.custom-buttonbusiness-applynow:hover { 
    background-color:#fff;
    color:#000!important;
}

.custom-buttonbusiness-moreinfo { 
    border: 2px solid #fff;
    color:#fff!important;
}

.custom-buttonbusiness-moreinfo:hover { 
    border: none;
    background: #FFBB41;
    /* orangeversion: background: linear-gradient(148deg, rgba(222, 125, 0, 1) 0%, rgba(255, 187, 65, 1) 100%); */
	background: radial-gradient(circle farthest-corner at 10% 20%, rgb(0, 105, 148, 1) 15.6%, rgba(0, 163, 217, 1) 35.9%, rgba(6 169 196) 81%);
	/* background: linear-gradient(148deg, rgba(28 28 28) 0%, rgba(124 124 124) 100%); */
    box-shadow: 0px 7px 20px rgba(51, 51, 51, 0.1);
	font-weight:bold;
}

.modal-custom {
    width: 100% !important;
    height:60% !important;
    position: absolute;
    bottom: 0%;
    border-radius: 20px 20px 0px 0px;
    background-color: #F9F9F9;
}

@media (max-width: 767px) {
    .modal-custom {
        width: 100% !important;
        height: 60% !important;
        position: absolute;
        bottom: 0%;
        border-radius: 20px 20px 0px 0px;
        background-color: #F9F9F9;
    }
}

.tickorange{
	color:#ffa400!important;
}

.custom-boxshadow{
	box-shadow: 0px 7px 20px rgba(51, 51, 51, 0.1);
}		

.custom-bgbusiness { 
    border: none;
    background: #FFBB41;
    background: linear-gradient(148deg, rgba(255, 187, 65, 1) 0%, rgba(222, 125, 0, 1) 100%);
    box-shadow: 0px 7px 20px rgba(51, 51, 51, 0.1);
}

.custom-bgbusiness-bleu { 
    border: none;
    background: #FFBB41;
    background: linear-gradient(90deg, #003b5c 0%, #00aeef 100%);
    box-shadow: 0px 7px 20px rgba(51, 51, 51, 0.1);
}

@media (min-width: 1200px){		
	.hidden-lg{display:none!important}
}
@media (min-width:992px) and (max-width:1199px){
	.hidden-md{display:none!important}
}

@media (min-width:768px) and (max-width:991px){	
	.hidden-sm{display:none!important}
}

@media (max-width: 767px){
	.hidden-xs{display:none!important}
}
/* CSS GENERAL */


/*Maita CSS*/

/*.tooltip-wrapper {
	position:fixed;
	bottom: 9%; 
	right: 1%; 
	z-index: 10;
}

#canvas {
	width: 200px;
	height: 200px;
	z-index: 1;
}

.tooltip-wrapper .tooltiptextmaita {
  visibility: hidden;
  font-size: 16px;
  width: 220px;
  background-color: white;
  color: #06183b;
  text-align: center;
  border: 1px solid #06183b;
  border-radius: 20px 20px 0px 20px;
  padding: 8px;
  position: absolute;
  /*bottom: 75%;
  bottom: 51%;
  left: -1%;
  transform: translateX(-50%);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.tooltip-wrapper:hover .tooltiptextmaita {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
	.tooltip-wrapper {
		position:fixed;
		bottom: 7%; 
		right: 1%; 
		z-index: 10;
	}
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
	.tooltip-wrapper {
		position:fixed;
		bottom: 13%; 
		right: 1%; 
		z-index: 10;
	}
}*/

#mytGPT{
	position: fixed;
    top: 80%;
    left: 93%;
}

.mytgpt-animation{
	width: 65%;
}

@media (max-width: 768px) {
	#mytGPT{
		position: fixed;
		top: 85%;
		left: 79%;
		width: 100px;
	}

	.mytgpt-animation{
		width: 65%;
	}
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
	#mytGPT{
		position: fixed;
		top: 69%;
		left: 91%;
		width: 76px;
	}

	.mytgpt-animation{
		width: 65%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Styles for tablets in portrait mode */
	#mytGPT{
		position: fixed;
		top: 85%;
		left: 90%;
	}

	.mytgpt-animation{
		width: 65%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Styles for tablets in landscape mode */
	#mytGPT{
		position: fixed;
		top: 81%;
		left: 93%;
	}

	.mytgpt-animation{
		width: 80%;
	}
}

.g-rounded-30--md{
	border-radius: 30px !important;
}

@media (max-width: 768px) {
	.g-rounded-30--md{
		border-radius: 0px !important;
	}
}