@charset "UTF-8";
html{scroll-behavior: smooth;}
body {
	font: 100%;
	font-family: 'Open Sans', sans-serif;
	background-color:transparent none;
	margin: 0;
	padding: 0;
	color:#666;
}

.bulletSpace li{margin-bottom: 10px;}
.bulletSpace2 li{margin-bottom: 0px;} 

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #fff /* #BE1E2D */ ;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #fff /* #BE1E2D */;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #F6A714 /* #D3979E */;
}

.industry-item a{ color: #000099 !important; }

.cta a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #fff /* #D3979E */;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;
	max-width: 1800px; /* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	/*min-width: 600px; a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background-color: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
	text-align:center;
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {
	padding: 10px 0;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.uspBoxes1 hr{border: 1px solid #0F3073; margin: 0 auto;}
hr{border: 1px solid #fff; margin: 0 auto;}
.sticky {position: fixed; top: 0px; z-index:100;}
.stickyServices {position: fixed; top: 70px; z-index:100;}
.topBar{position: fixed; top: 0px; width: 100%; margin: 0 auto; background-color: #0F3073; padding-bottom: 10px; box-shadow: 0px 2px 10px 0px black; z-index: 1000;}
.topBarHolder{width: 100%; margin: 0 auto; padding: 0px; max-width: 1500px; font-size: 0.8rem; font-weight: bold; margin-top: 10px; display: flex; align-items: center; gap: 10px;}
.logoHolder{width: 20%; text-align: center; min-width: 200px; float: left;}
.navHolder{display: flex; align-items: center; gap: 60px; margin: 0 auto; float: left;}
.demoButtonHolder{float: left;}
.demoButton{float: left; background-color: #F6A714; padding: 10px 25px 10px 25px; border-radius: 10px; color: white; text-align: center; font-weight: bold;  margin: 7px 20px 0px 20px;}
.navItem{}

.patent{position: absolute; z-index: 10; top: 90px; right: 40px; width: 200px; }
.patentStep1{position: absolute; z-index: 10; top: 90px; right: 40px; width: 160px; }

/* Hide toggle button on desktop */
.menuToggle {
    display: none;
    font-size: 26px;
    cursor: pointer;
}

.keyFeaturesContainer{display: flex; align-items: center;}
.keyFeatures{
	font-size: 14px; text-align: left;
	display: flex; align-items: center;
	margin: 20px;
}
.iconHolder{width: 70px}
.textHolder{width: 400px;}
.keyFeatures .icons{width: 50px; margin-right: 20px;}
.cta {
	width: 100%;
	background-color: #0F3073; /* match your dark blue background */
	color: white;
	display: flex;
	justify-content: center;  /* horizontal centering */
	align-items: center;      /* vertical centering */
	height: 250px;            /* set a fixed height (adjust as needed) */
	text-align: center;
	font-size: 1.5rem;        /* optional: adjust for readability */
  }
  .ctaHolder{
	width: 80%; margin: 0 auto;
	display: flex;
	justify-content: center; 
	align-items: center;
	text-align: center;
}
  .ctaButtons{
	background-color: #F6A714; /* match your dark blue background */
	color: white;
	display: flex;
	justify-content: center;  /* horizontal centering */
	align-items: center;      /* vertical centering */
	text-align: center;
	font-size: 1.3rem;        /* optional: adjust for readability */
	padding: 10px; padding-left: 20px; padding-right: 20px;
	width: 45%;
	 border-radius: 10px; margin: 30px;
	 float: left;
  }

  .headingText{font-size: 30px; color: white; text-align: left; width: 97%; padding: 5px 5px 5px 15px; background-color: #0F3073; border-radius: 10px; margin-top: 10px; margin-bottom: 10px;}
  .stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-top: 50px; margin-bottom: 50px;
	flex-wrap: wrap;
  }
  
  .step {text-align: center;}
  
  .circle {
	width: 40px;
	height: 40px;
	background-color: #9fa1a6;
	color: white;
	border-radius: 50%;
	line-height: 40px;
	font-weight: bold;
	margin: 0 auto 8px auto;
  }
  .done{background-color: #41be4e;} 
  .active{background-color: #F6A714;}
  .labelActive{color: #000099;}
  .label {
	max-width: 190px;;
	font-size: 0.8rem;
  }
  
  .arrow {
	font-size: 24px;
	color: #999;
	margin-top: -20px;
  }
  
  .industryButtonHolder {
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;             /* allow wrapping to next line */
	justify-content: center;     /* center items horizontally */
	gap: 20px;                   /* spacing between buttons */
  }
  
.industryButtons {
	background-color: #0F3073;
	color: white;
	text-align: center;
	font-size: 1rem;
	padding: 20px;
	border-radius: 10px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 100px;            /* optional: consistent button width */
	transition: all 0.1s ease; /* Smooth animation on hover */
  }
  .industryButtons:hover {
	background-color: orange;      /* Change background on hover */
	transform: scale(1.05);        /* Slightly enlarge the button */
	color: white;                  /* Optional: ensure text color remains white */
  }
.uspHolder{
	margin: 0 auto;
	display: flex;
	justify-content: center; /* Center the row horizontally */
	gap: 20px; /* Space between boxes */
	margin-top: 120px;
	margin-bottom: 120px;
	position: relative;
	width: 80%;
	color:#606161;
	}
.uspBoxes{
	text-align: center;
	width: 32%;
	padding: 20px;
	border: solid #000099; border-radius: 10px;
	background-color: #f5f5f5;
	margin-bottom: 20px;
	float: left;
}
.uspBoxes2{
	text-align: center;
	width: 40%;
	padding: 20px;
	border: solid #000099; border-radius: 10px;
	background-color: #f5f5f5;
	margin-bottom: 20px;
	float: left;
}
.uspBoxes1{
	text-align: center;
	width: 30%;
	padding: 20px;
	border: solid #000099; border-radius: 10px;
	background-color: #f5f5f5;
	margin-bottom: 20px;
	float: left;
}
.whosFor .uspBoxes{position: relative; margin-top: -85px; }
.redBase .uspBoxes{top: 10px;}

.uspHolder1{
	margin: 0 auto;
	display: flex;
	justify-content: center; /* Center the row horizontally */
	gap: 20px; /* Space between boxes */
	margin-top: 120px;
	padding-top: 40px;
	position: relative;
	width: 80%;
	background-color: #0F3073;	
	}
.uspBoxes1{
	text-align: center;
	width: 23%;
	padding: 20px;
	/*border: solid #000099;*/
	border-radius: 60px 60px 0px 0px;
	/*background-color: #E4EBFA;*/
	margin-bottom: 20px;
	color: #0F3073;
}
.uspBoxes1 .icon{width: 200px; margin: 0 auto; margin-top: 20px;}

.productBanner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 650px;
	background-image: "../images/banner/product.png";
	object-fit: cover;
}
.industryDrop{background-color: #0F3073 !important; color: #fff !important; font-weight: bold !important;}

.titleHeader{position: relative; top:50px;/* background-color: #0F3073;*/ background-color: #F6A714; font-size: 14px; font-weight: bold; padding: 10px; border-radius: 10px; color: #fff; display: inline-block;  margin: 0 auto; /* width: 16%; box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px; */}

.instruction1{border-radius: 10px; background-color: #0F3073; color: #fff; padding: 5px; font-weight: bold; font-size: 0.8rem; width: 73%; margin: 20px auto; margin-top: -20px;}
.instruction2{border-radius: 10px; background-color: #ddd; color: #0F3073;  padding: 5px; font-weight: bold; font-size: 0.8rem; width: 55%; margin: 20px auto; margin-top: -20px;}
.instruction{border-radius: 10px; background-color: #F6A714; color: #0F3073;  padding: 5px; font-size: 1rem; width: 80%; margin: 20px auto; margin-top: -20px;}
/* For Product-step5 */
.risk-table {
	width: 80%;
	border-collapse: collapse;
	margin: auto;
	font-family: Arial, sans-serif;
}
.risk-table th, .risk-table td {
	padding: 12px;
	text-align: center;
	border: 1px solid #ccc;
}
.red-sharp { background-color: #901515; color: white; font-weight: bold; }
.red-light { background-color: #de5b5b; color: black; }
.yellow { background-color: #F6A714; color: black; }
.green { background-color: #28a62e; color: white; }
.unknown { background-color: #eeeeee; color: black; }
.overall-score {
	font-size: 1.5em;
	font-weight: bold;
	padding: 15px;
	text-align: center;
	width: 80%;
	margin: 20px auto;
	border-radius: 6px;
}
/* For Product-step5 */



.displayFlex{display: flex; align-items: center;}
.displayFlexTop{display: flex; align-items:flex-start;}
.VMdiv{margin: 50px 0px 50px 0px; padding: 180px 0px 180px 0px;}
.aboutBoxLeft{padding: 20px; padding-left: 0px; width: 50%; margin: 0 auto;}
.aboutBoxRight{padding: 20px; padding-right: 0px; width: 50%; margin: 0 auto}

.productPageHeading{width: 100%; z-index: 100; position: absolute; top: 15%; color: #fff;}
/*.productForm{width: 100%; float: left; text-align: left; z-index: 100; position: absolute; top: 230px;}*/

.productForm{width: 30%; float: left;}
.industries{width: 70%; margin: 0 auto; padding-left: 30px; text-align: left; float: left;}
.industries ul {margin-left: 30px;}
.industries ul li{margin-bottom: 10px; line-height: 22px;}

.industry-bg-slider {width: 100vw; position: relative; overflow: hidden; top: 70px;}
  .swiper-container {width: 100%;height: 100%;}
  
  .swiper-slide {
	background-size: cover;
	background-position: center;
	width: 100vw;
	min-height: 600px; /* Adjust as needed */
	display: flex;
	align-items: center;
	justify-content: center;
  }
  .slideContent{width: 70%; float: left;}
  .slideHeight{height: 125px;}
  .slideLeftMargin{width: 35%; float: left;}
  .slide-content {
	background: rgba(10, 31, 109, 0.7); /* Optional overlay for contrast */
	color: white;
	padding: 40px;
	max-width: 100%; 	min-height: 600px; /* Adjust as needed */

  }
.industry-slide {
	background-size: cover;
	background-position: center;
	padding: 40px;
	color: white;
	height: 100%;
	display: flex;
	align-items: center;
  }
  
  .swiper-container {height: 100%;}
  .swiper-pagination {position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center;}
  
  .swiper-pagination-bullet {background-color: rgba(255, 255, 255, 0.6); opacity: 1; margin: 0 5px;}
  
  .swiper-pagination-bullet-active {background-color: #ffffff;}

.verificationHolder{width: 100%; margin-top: 100px;}
.verificationHolder input[type=text]{
	width:100%; text-align: center;
  padding: 20px 20px;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color:#FAFAFA;
  font-size:20px;
}
.verificationHolder input[type=submit] {
	width: 100%; padding-top: 10px; padding-bottom: 30px; font-size: 20px;
	background-color:#0F3073;
	color: #fff;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
  }

  /* Product step - 4 start */
.wrap {font:12px Arial, san-serif;}
h1.gaix-header {padding-left:4.25%; margin:20px 0 0;}
form .statement {display:block; font-size: 14px; font-weight: bold; padding: 30px 0 0 4.25%; margin-bottom:10px;}
form .gaix {list-style:none; width:90%; margin:0 auto; padding:0 0 35px; display:block; border-bottom:2px solid #efefef;}
form .gaix:last-of-type {border-bottom:0;}
form .gaix:before {content: ''; position:relative; top:11px; left:10%; display:block; background-color:#efefef; height:4px; width:78%;}
form .gaix li {display:inline-block; width:19%; text-align:center; vertical-align: top;}
/*form .gaix li input[type=radio] {display:block; position:relative; top:-6px;  left:43%; width: 25px;}*/ /*left:50%;*/
form .gaix li input[type=radio] {
	appearance: none; /* Remove default style */
	-webkit-appearance: none;
	-moz-appearance: none;
	display: block;
	position: relative;
	top: -6px; left: 43%; width: 30px; height: 30px;
	border: 2px solid #ccc;
	border-radius: 50%; background-color: white; cursor: pointer; transition: all 0.3s ease;
  }
  
  /* When checked */
  form .gaix li input[type=radio]:checked {border-color: #0F3073; background-color: #0F3073;}
  
  /* Optional: inner dot effect */
  form .gaix li input[type=radio]::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: white;
	transform: scale(0);
	transition: transform 0.3s ease;
  }
  
  form .gaix li input[type=radio]:checked::before {
	transform: scale(1);
  }
  
form .gaix li label {width:100%;} /*likert */
form .buttons {margin:30px 0; padding:0 4.25%; text-align:right } 
form .buttons button {
  padding: 5px 10px;
  background-color: #67ab49;
  border: 0;
  border-radius: 3px;
}
form .buttons .clear {background-color: #e9e9e9;}
form .buttons .submit {background-color: #67ab49;} 
form .buttons .clear:hover {background-color: #ccc;}
form .buttons .submit:hover {background-color: #14892c;} 

.segmentsHolder{
	width: 80%;
	margin: 40px auto;
	display: flex;
	flex-wrap: wrap;             /* allow wrapping to next line */
	justify-content: center;     /* center items horizontally */
	gap: 10px;                   /* spacing between buttons */
}
.segment{
	color: #fff; font-weight: bold;
	background-color: #ccc;
	text-align: center;
	font-size: 0.7rem;
	padding: 10px;
	border-radius: 10px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;            /* optional: consistent button width */
}
.segmentsHolder .active{background-color: #0F3073;}

.segmentHeading{font-size: 1.9rem; font-weight: bold; color: #0F3073; margin-bottom: 0.3rem;}
.segmentDescription{font-size: 1rem; color: #0F3073; width: 60%; margin: 0 auto;}
/* .segmentDescription{font-size: 0.8rem; color: #0F3073; width: 42%; margin: 0 auto;} */
.questionNumber{font-size: 0.8rem; font-weight: bold; background-color: #ccc; color:#606161; padding: 5px; border-radius: 10px; width: 12%; margin: 20px auto;}
.quest{font-size: 1.2rem; line-height: 1.6rem; color: #333; margin: 40px; margin-top: 0px; text-align: left;}
/* .quest{font-size: 0.9rem; line-height: 1.5rem; color: #606161; margin: 40px; margin-top: 0px;} */
.indented-list {
	margin-left: 40px;  /* indent the list */
	padding-left: 20px; /* add space inside list */
	max-width: 80%;     /* prevent stretching across full width */
	line-height: 1.6;
  }
  
  .indented-list li {
	margin-bottom: 6px;
	text-align: left;
  }
  
.hint{font-size: 0.8rem; font-weight: bold; color: #606161;}

.pagination-container {display: flex; align-items: center; justify-content: center; gap: 40px; background: #fff; padding: 20px;}

  .arrowleft {
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-color: transparent;
	border: none;
	display: inline-block;
	cursor: pointer;
	background-image: url("../images/icons/leftArrow.svg");
	background-color: #fff;
  }
  .arrowleft:hover{background-color: #fff;} .arrowright:hover{background-color: #fff;}
  .arrowright {
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-color: transparent;
	border: none;
	display: inline-block;
	cursor: pointer;
	background-image: url("../images/icons/rightArrow.svg");
  }
  .dots {display: flex; align-items: center; gap: 10px;}
  .dot {width: 10px; height: 10px; background-color: #a4a4b5; border-radius: 50%; transition: all 0.3s ease;}
  .dot.active {width: 30px; border-radius: 999px;}
  
  
  /* Product step - 4 end */

  /* Our Story Classes start */
  .drRizImages{width: 40%; margin: 0 auto; float: left;}
  .DrRizInfo{width: 60%; margin: 0 auto; float: left;}
  .carousel {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
  }
  
  .carousel-image {
	width: 100%;
	display: none;
	border-radius: 15px;
	transition: opacity 0.5s ease;
  }
  
  .carousel-image.active {
	display: block;
  }
  
  .carousel-dots {
	text-align: center;
	margin-top: 10px;
  }
  
  .carousel-dots span {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 5px;
	background-color: #bbb;
	border-radius: 50%;
	cursor: pointer;
  }
  
  .carousel-dots .active-dot {
	background-color: #717171;
  }
  
  
  /* Our Story Classes end */

/* Industry Page classes Start */
.industry-showcase {
	/*background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);*/
	border-radius: 20px;
	padding: 30px;
	margin: 40px 0;
}

.industry-showcase h2 {
	text-align: center;
	margin-bottom: 30px;
	font-size: 2.5em;
	color: #1e3a8a;
}

.industry-showcase p {
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 30px;
	opacity: 0.9;
}

.industry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 15px;
	margin: 25px 0;
}

.industry-item {
	background: rgba(0,0,0,0.05);
	border-radius: 12px;
	padding: 15px;
	text-align: center;
	transition: all 0.3s ease;
}

.industry-item:hover {
	transform: scale(1.05);
	background: rgba(251, 191, 36, 0.1);
}

.industry-icon {
	font-size: 3em;
	margin-bottom: 8px;
	display: block;
}

.industry-name {font-size: 1.2em; font-weight: bold; margin-bottom: 6px; color: #0F3073;}
.industry-name:hover{color: #0F3073;}

.industry-questions {
	font-size: 1.0em; color: #555;
	/*color: #1e3a8a;*/ 
	font-weight: 600;
}        

@media (max-width: 768px) {
	.industry-grid {
		grid-template-columns: 1fr;
	}
}
/* Industry Page classes End */

/* Courses Classes Start */
.CourseContainer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: left;
}

 /* Hero Section */
 .hero {
	background: #0F3073;
	padding: 120px 0 80px;
	color: white;
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.1"><circle cx="9" cy="9" r="2"/><circle cx="51" cy="51" r="2"/><circle cx="9" cy="51" r="2"/><circle cx="51" cy="9" r="2"/></g></svg>');
	animation: float 20s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
}

.hero-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero-text h1 {
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
	line-height: 1.2;
	background: linear-gradient(45deg, #ffffff, #F6A714);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-text p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	opacity: 0.9;
}

.course-meta {
	display: flex;
	gap: 2rem;
	margin-bottom: 2rem;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255,255,255,0.1);
	padding: 0.5rem 1rem;
	border-radius: 25px;
	backdrop-filter: blur(10px);
}

.cta-button {
	background: #F6A714;
	color: white;
	padding: 1rem 2rem;
	border: none;
	border-radius: 50px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(246, 167, 20, 0.3);
	background: #e89500;
}

.hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.course-card {
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	padding: 2rem;
	border: 1px solid rgba(255,255,255,0.2);
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.stat {
	text-align: center;
	padding: 1rem;
	background: rgba(255,255,255,0.1);
	border-radius: 10px;
}

.stat-number {
	font-size: 2rem;
	font-weight: bold;
	color: #F6A714;
}

/* Course Overview */
.overview {
	padding: 80px 0;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.section-title {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 3rem;
	background: linear-gradient(45deg, #0F3073, #6b8ac8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.overview-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.overview-text {
	font-size: 1.1rem;
	line-height: 1.8;
}

.overview-features {
	display: grid;
	gap: 1rem;
}

.feature {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: white;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.feature:hover {
	transform: translateX(10px);
}

.feature-icon {
	width: 40px;
	height: 40px;
	background: linear-gradient(45deg, #0F3073, #3159a8);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
}

/* Key Topics */
.topics {
	padding: 80px 0;
	background: white;
}

.topics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.topic-card {
	background: white;
	color: #333;
	padding: 2rem;
	border-radius: 15px;
	transition: transform 0.3s ease;
	position: relative;
	overflow: hidden;
	border: 2px solid #f0f0f0;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.topic-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, transparent 30%, rgba(15, 48, 115, 0.05) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.topic-card:hover::before {
	transform: translateX(100%);
}

.topic-card:hover {
	transform: translateY(-5px);
	border-color: #0F3073;
	box-shadow: 0 10px 30px rgba(15, 48, 115, 0.2);
}

.topic-card h3 {
	font-size: 1.3rem;
	margin-bottom: 1rem;
	color: #0F3073;
	font-weight: 600;
}

/* Benefits */
.benefits {
	padding: 80px 0;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	color: #333;
}

.benefits-container {
	position: relative;
	overflow: hidden;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.benefits-carousel {
	display: flex;
	transition: transform 0.5s ease;
	width: calc(300% + 3rem); /* Account for gaps */
	margin-left: -1.5rem; /* Offset first gap */
}

.carousel-slide {
	display: flex;
	gap: 2rem;
	width: calc(33.333% - 1rem); /* Adjust for gap distribution */
	flex-shrink: 0;
	padding-left: 1.5rem; /* Add gap before each slide */
}

.benefit-card {
	background: white;
	padding: 2rem;
	border-radius: 15px;
	border: 2px solid #f0f0f0;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
	flex: 1;
}

.benefit-card:hover {
	transform: scale(1.05);
	border-color: #0F3073;
	box-shadow: 0 10px 30px rgba(15, 48, 115, 0.2);
}

.benefit-card h3 {
	color: #0F3073;
	margin-bottom: 1rem;
	font-weight: 600;
}

.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ddd;
	cursor: pointer;
	transition: background 0.3s ease;
}

.dot.active {
	background: #0F3073;
}

/* JavaScript transforms for proper centering */
/* 
Apply these transforms via JavaScript:
- Slide 1 (default): transform: translateX(0)
- Slide 2: transform: translateX(-33.333%)
- Slide 3: transform: translateX(-66.666%)
*/

/* Mobile Styles */
@media (max-width: 768px) {
	.patent{position: absolute; z-index: 10; top: 170px; right: 10px; width: 220px; }
	.patentStep1{position: absolute; z-index: 10; top: 150px; right: 10px; width: 120px; }
	.benefits {
		padding: 40px 0;
	}
	
	.benefits-container {
		padding: 0 1rem;
		max-width: 100%;
	}
	
	.benefits-carousel {
		width: 300% !important;
		margin-left: 0 !important;
		gap: 0 !important;
	}
	
	.carousel-slide {
		flex-direction: column !important;
		gap: 1rem !important;
		width: 33.333% !important;
		padding: 0 1rem !important;
		box-sizing: border-box;
	}
	
	.benefit-card {
		padding: 1.5rem !important;
		width: 100% !important;
		flex: none !important;
		margin: 0 !important;
		box-sizing: border-box;
	}
	
	.benefit-card:hover {
		transform: scale(1.02) !important;
	}
}

		.methodology-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 1.5rem;
			margin-top: 2rem;
		}

		.method-card {
			background: rgba(102, 126, 234, 0.08);
			border: 1px solid rgba(102, 126, 234, 0.3);
			border-radius: 15px;
			padding: 1.5rem;
			text-align: center;
			transition: all 0.3s ease;
			box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
			display: flex; align-items: center;
		}

		.method-card:hover {
			background: rgba(102, 126, 234, 0.15);
			transform: scale(1.05);
			box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
		}

		.grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .glass-card {
            background: rgba(102, 126, 234, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(102, 126, 234, 0.2);
            border-radius: 20px;
            padding: 2rem;
            margin-bottom: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.1);
        }

        .glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
            transition: left 0.5s;
        }

        .glass-card:hover::before {
            left: 100%;
        }

        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
        }
		.targerAudienceText{
			margin-top: -40px; margin-left: 40px;
		}


		.TM-list {
            list-style: none;
            padding: 0;
        }

        .TM-list li {
            padding: 1rem 0;
            border-bottom: 1px solid rgba(102, 126, 234, 0.2);
            position: relative;
            padding-left: 2rem;
        }

        .TM-list li::before {
            content: '▶';
            position: absolute;
            left: 0;
            color: #667eea;
            font-size: 0.8rem;
        }
        /* Faculty */
        .faculty {			
            padding: 80px 0;
            background: white;
        }

        .faculty-card {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem; 
            background: linear-gradient(135deg, #0F3073 0%, #0F3073 100%);
            border-radius: 20px;
            padding: 3rem;
            color: white;
            margin-top: 3rem;
			
        }

        .faculty-holder {						
			margin-left: 30px;
        }

		.faculty-image {
			width: 250px;
			height: 250px;
			object-fit: cover;
			border-radius: 50%;
			display: block;
        }

        .faculty-info h3 {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: #F6A714;
        }

        .faculty-credentials {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin: 1rem 0;
        }

        .credential {
            background: rgba(255,255,255,0.1);
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.9rem;
        }

		
/* Courses Classes End */

.courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 30px;
	margin-top: 20px;
}

.TRcourse-card {
	background: white;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.TRcourse-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #1e3a8a, #3b82f6);
}

.TRcourse-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.course-title {
	font-size: 32px;
	font-weight: 700;
	color: #1e3a8a;
	margin-bottom: 16px;
	line-height: 1.3;
}

.course-duration {
	font-size: 14px;
	color: #6b7280;
	margin-bottom: 24px;
	font-weight: 500;
}

.explore-btn {
	width: 100%;
	background: #1e3a8a;
	color: white;
	border: none;
	
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: none;	
}

.explore-btn:hover {
	background: #F6A714;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(30, 58, 138, 0.3);
}

.explore-btn:active {
	transform: translateY(0);
}

.subtitle {
	font-size: 16px;
	color: #4b5563;
	margin-bottom: 12px;
	font-weight: 500;
}

/* Special styling for cards with subtitles */
.has-subtitle .course-title {
	margin-bottom: 8px;
}

/* Responsive design */
@media (max-width: 768px) {
	.courses-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.course-card {
		padding: 24px;
	}
	
	.course-title {
		font-size: 20px;
	}
}

/* Animation for cards */
.course-card {
	animation: fadeInUp 0.6s ease forwards;
	opacity: 0;
	transform: translateY(30px);
}

.course-card:nth-child(1) { animation-delay: 0.1s; }
.course-card:nth-child(2) { animation-delay: 0.2s; }
.course-card:nth-child(3) { animation-delay: 0.3s; }
.course-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}










.menuButtons{
	float:left;
	font-size:14px;
	width:10%;
	text-align:left;
	height:50px;
	margin-top:15px;
}
.tagline{
	color: #0F3073 /* #BE1E2D */;
	font-size:30px;
	font-weight:bold;
}

.header{
	margin: 0 auto;
}
.headerShadow{
	width:100%;
	height:20px;
	background-image:url(../images/headerShadow.png);
	background-repeat:repeat-x;
}
.UpComingOuterBox{
	margin-left:20px !important; margin-bottom: 20px !important; width:23%;
}
.UpComingInnerBox{
	text-align:left;
	background-color:#FFF;
	width:90%;
	height:140px;
	padding:5px;
	margin-left:8px;
}
.UpComingProgName{
	font-size:16px;
	height:55px;
}
.UpComingProgNameCHPT{
	font-size:16px;
	height:50px;
}
.ExOuterBox{
	height: 150px;
	width:150px; 
}
.ExOuterBox:hover{
	background-image:url(../images/hover.gif);
	background-repeat:no-repeat;
}

.ExInnerBox{
	text-align:left;
	background-color:#FFF;
	width:90%;
	height:135px;
	padding:5px;
	margin-left:8px;
}
.ExProgName{
	font-size:16px;
	height:135px;
	line-height: 1; 
	padding: 0px 5px 10px 0px;
}
.ExProgNameCHPT{
	font-size:16px;
	height:170px;
	line-height: 1; 
	padding: 0px 5px 43px 0px;
}


.pageText{
	font-size:14px;
	text-align:justify;
	width:100%;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFF;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color:#666;
    text-align: center;
    padding: 6px 10px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color:#FC0; color:#FFF;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}





.div1{
	margin: 0 auto;
}
.div2{
	height:320px;
}





.whiteBase{
	background-color:#FFF;
}
.greeenBase{
	background-color: #12C853;
}
.greyBase{
	background-color: #EBEBEB;
}
.darkGreyBase{background-color: rgb(118, 120, 132);} .darkGrey{color: rgb(118, 120, 132);}
.blueBase{
	background-color: #000099;
}
.orangeBase{
	background-color: #F6A714;
}
.fuchsiaBase{
	background-color: #bc1f56;
}
.redBase{
	background-color: #0F3073; /* #CF3038; */
}
.lightRedBase{
	background-color: #0F3073 /*#D3979E */;	
}


.robo{
	font-family: 'Roboto Slab', serif;
}
.openSans{
}
.red{
	color: #0F3073 /* #BE1E2D*/;	
}
.lightRed{
	color: #0F3073 /* #D3979E */;	
}
.white{
	color:#FFF;
}
.grey{
	color: #606161;
}
.green{
	color: #12C853;
}
.blue{
	color: #000099;
}
.orange{
	color: #F6A714 !important;
}
.yellow{
	color:#FF0;
}
.fuchsia{
	color: #bc1f56;
}
.bold{
	font-weight:bold;
}



.fontSize60{
	font-size: 60px;
	
}
.fontSize40{
	font-size: 40px;
}
.fontSize30{
	font-size: 30px;
}
.fontSize20{
	font-size: 20px;
}
.fontSize19{
	font-size: 19px;
}
.fontSize18{
	font-size: 18px;
}
.fontSize16{
	font-size: 16px;
}
.fontSize14{
	font-size: 14px;
}
.fontSize12{
	font-size: 12px;
}
.fontSize10{
	font-size: 10px;
}
.fontSize8{
	font-size: 9px;
}
.left{
	position:relative;
	float:left;
}
.right{
	position:relative;
	float:right;
}
.width100Percent{
	margin: 0 auto;
	width: 100%;
}
.width95Percent{
	margin: 0 auto;
	width: 95%;
}
.width80Percent{
	margin: 0 auto;
	width: 80%;
}
.width90Percent{
	margin: 0 auto;
	width: 90%;
}
width75Percent{
	margin: 0 auto;
	width: 70%;
	}
.width70Percent{
	margin: 0 auto;
	width: 70%;
}
.width65Percent{
	margin: 0 auto;
	width: 65%;
}
.width60Percent{
	margin: 0 auto;
	width: 60%;
}
.width50Percent{
	margin: 0 auto;
	width: 50%;
}
.width49Percent{
	margin: 0 auto;
	width: 49%;
}
.width48Percent{
	margin: 0 auto;
	width: 48%;
}
.capWidth48Percent{
	margin: 0 auto;
	width: 48%;
}
.width45Percent{
	margin: 0 auto;
	width: 45%;
}
.width45Percent2{
	margin: 0 auto;
	width: 45%;
}
.width40Percent{
	margin: 0 auto;
	width: 40%;
}

.width38Percent{
	margin: 0 auto;
	width: 38%;
}
.width30Percent{
	margin: 0 auto;
	width: 28%;
}
.width25Percent{
	margin: 0 auto;
	width: 22%;
	padding: 5px 10px;
}
.width20Percent{
	margin: 0 auto;
	width: 20%;
}
.width20Percent2{
	margin: 0 auto;
	width: 20%;
}
.width15Percent{
	margin: 0 auto;
	width: 15%;
}
.width10Percent{
	margin: 0 auto;
	width: 10%;
}
.width5Percent{
	margin: 0 auto;
	width: 5%;
}
.width3Percent{
	margin: 0 auto;
	width: 3%;
}
.width1Percent{
	margin: 0 auto;
	width: 1%;
}
.height10{
	height: 10px;
}
.height20{
	height: 20px;
}
.height30{
	height: 30px;
}
.height40{
	height: 30px;
}
.height50{
	height: 50px;
}
.height60{
	height: 60px;
}
.height80{
	height: 80px;
}
.height90{
	height: 90px;
}
.height100{
	height: 100px;
}
.height140{
	height: 140px;
}
.height160{
	height: 160px;
}
.height150{
	height: 150px;
}
.height180{
	height: 180px;
}
.height300{
	height: 300px;
}
.height400{
	height: 400px;
}
.height500{
	height: 500px;
}
.height600{
	height: 600px;
}
.height800{
	height: 800px;
}

.rightAligned{
	text-align:right;
}
.leftAligned{
	text-align:left;
}
.justify{
	text-align:justify;
}
.centerAligned{
	text-align:center;
}
.flexCenter{display: flex; align-items: center;}
.displayTable{
	display:table; overflow:visible; margin: 0 auto; text-align:center;
}
.middleAligned{
	display: table-cell;
	vertical-align:middle;
}
.bAligned{
	display: table-cell;
	vertical-align:bottom;
}
.bottomAligned{
	position:absolute;
	bottom:0px;
	right:0px;
}
.titleBox{
	padding: 10px 10px;
}
.space{
	margin: 0 10px;
}

.noDesktop{display:none;}

.PBox{
	float:left;
	width:150px;
	height:150px;
	font-size:14px;
	margin-right:14.2px;
	margin-bottom:14px;
}

.imageBorder{border: 11px solid #0F3073;}

.testimonialText{
	font-size:20px;
	font-style:italic;
	text-align:left;
}
.footerDivs{width: 50%; float: left; margin: 0 auto;}
.footerText{
	font-size:14px;
	text-align:justify;
	color:#FFF;	
}
.enrollButton{
	color:#FFF;
	font-size:20px;
}
.imageHover{
	cursor:pointer;
    position: relative;
	float:left;
	width:180px;
	height:180px;

}
.imageHover .H{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
}
.imageHover:hover .H{
	display: inline;
}
.phoneNumber{width: 267% !important; background-color: #00A14B; margin: 50px 0 !important;}

input[type=text],input[type=password],input[type=email], input[type=tel], select, textarea{
	width:100%;
  padding: 20px 20px;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color:#FAFAFA;
  font-size:14px;
}
select{padding: 12px 20px;}

.checkbox-wrapper-25 input[type="checkbox"] {
	margin-top: 20px; float: left;
	background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),  -webkit-linear-gradient(left, #f66 50%, rgb(61, 191, 100) 50%);
	background-size: 100% 100%, 250% 100%;
	background-position: 0 0, 15px 0;
	border-radius: 25px;
	box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
				inset 0 0 10px hsla(0,0%,0%,.5),
				0 0 0 1px hsla(0,0%,0%,.1),
				0 -1px 2px 2px hsla(0,0%,0%,.25),
				0 2px 2px 2px hsla(0,0%,100%,.75);
	cursor: pointer;
	height: 25px;
	padding-right: 25px;
	width: 75px;
	-webkit-appearance: none;
	-webkit-transition: .25s;
}
.checkbox-wrapper-25 input[type="checkbox"]:after {
	background-color: #eee;
	background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
	border-radius: 25px;
	box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
				inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
				0 1px 3px 1px hsla(0,0%,0%,.5),
				0 0 2px hsla(0,0%,0%,.25);
	content: '';
	display: block;
	position: relative;
	top: -8px; left: -15px;
	height: 25px;
	width: 50px;
}
.checkbox-wrapper-25 input[type="checkbox"]:checked {
	background-position: 0 0, 80px 0;
	padding-left: 40px;
	padding-right: 0;
}
.checkbox-wrapper-25 label{margin-left: 10px; width: 80%; display: flex; align-items: center; height: 50px; float: left; margin-top: 7px;}
/*
input[type=tel],{
	width:100%;
  padding: 12px 20px;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color:#FAFAFA;
  font-size:14px;
}*/

input[type=submit] {
  width: 100%;
  background-color:#F6A714;
  color: #0F3073;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* For Tooltip */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
	font-size:10px;
	font-weight:bold;
  visibility: hidden;
  width: 150px;
  background-color: #0F3073 /* #BE1E2D */;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 70%;
  left: 70%;
  margin-left: -90px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #0F3073 /* #BE1E2D */ transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Team page classess Start */
.team-container {
	display: flex;
	width: 100%;
  }

  .team-list {
	width: 40%;
	/*background-color: #f4f4f4;*/
	overflow-y: auto;
	padding: 20px;
	box-sizing: border-box;
  }

  .team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
  }

  .team-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: pointer;
	padding: 10px;
	border-radius: 10px;
	background-color: #ffffff;
	transition: background 0.3s;
  }

  .team-member img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%;
	filter: grayscale(100%);
	transition: filter 0.3s;
  }

  .team-member span {
	margin-top: 10px;
	font-size: 12px;
	color: #333;
  }

  .team-member:hover img,
  .team-member.active img {
	filter: grayscale(0%);
  }

  .team-member.active {
	background-color: #F6A714;
  }

  .memberName{font-size: 14px !important;}
  .team-details {
	width: 60%;
	padding: 40px;
	box-sizing: border-box;
  }

  .team-details img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 20px;
  }

  .team-name {
	font-size: 24px;
	font-weight: bold;
	text-align: left;
  }

  .team-profile {
	margin-top: 10px;
	font-size: 16px;
	color: #555;
	text-align: left;
  }
  .teamName{margin-top:50px; width: 60%; float: left;}
  /* Team Page classes end */

@media screen and (max-width: 1450px)  {
	.navHolder{gap: 40px;}

	.stepper {margin-top: 80px;}
}

@media screen and (max-width: 1250px)  {	
	.noDesktop{display: block;}
	.navHolder{gap: 30px;}
    
	.productForm{width: 100%; margin: 0 auto; padding: 20px;}
	.productPageHeading{width: 100%; top: 180px; padding: 20px;}	
	.industries{width: 100%; margin: 0 auto; margin-left: 0px; padding: 20px; }
	.slide-content{min-height: 750px;}
	.stepper {margin-top: 80px; gap: 15px;} .label{font-size: 0.5rem;}
	.segmentsHolder{width: 100%; gap: 5px; }
	.verificationHolder{width: 80%; margin: 0 auto; margin-top: 100px;}

	
	  .team-list {
		width: 49%;
		padding: 10px;
	  }
	
	  .team-grid {
		grid-template-columns: repeat(3, 1fr); /* Or 1 column if space is tight */
	  }
	
	  .team-details {
		width: 49%;
		padding: 20px;
	  }
	
	  .team-details img {
		width: 140px;
		height: 140px;
		margin: 0 auto 15px auto;
		display: block;
	  }
	  .hero{top: -100px;}
}

/* iPad */
@media screen and (min-width: 769px) and (max-width: 1024px)  {
	
	.navHolder{gap: 20px;}
	
	.stepper {gap: 35px;}
	.productPageHeading{width: 100%; top: 180px; padding: 25px;}	
	
	.industries ul{margin-left: 40px;}
	.slide-content{min-height: 800px;}
	
	
	
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
 

.displayTable{
	display:table; overflow:visible; margin: 0 auto;
	width:100%;
}
.flexCenter{display: block;}  
  
.bottomAligned{
	position:absolute;
	top:0px;
	right:0px;
}
  
.fontSize60{
	font-size: 40px;	
}
.fontSize30{
	font-size: 30px;
}
.fontSize19{
	font-size: 19px;
}
.fontSize20{
	font-size: 15px;
}
.fontSize14{
	font-size: 20px;
}
.width100Percent{
	width: 100%;
}
.width90Percent{
	margin: 0 auto;
	width: 100%;
}
.width80Percent{
	margin: 0 auto;
	width: 100%;
}
.width70Percent{
	margin: 0 auto;
	width: 95%;
}
.width65Percent{
	width: 65%;
}
.width60Percent{
	width: 60%;
}
.width50Percent{
	margin: 0 auto;
	width: 100%;
}
.width40Percent{
	margin: 0 auto;
	width: 40%;
}
.width30Percent{
	margin: 0 auto;
	width: 100%;
}
.width25Percent{
	margin: 0 auto;
	width: 100%;
	padding: 0px 10px;
}
.width20Percent{
	margin: 0 auto;
	width: 100%;
}
.width10Percent{
	margin: 0 auto;
	width: 100%;
}
.height165{
	height: 40px;
}


.noMobile{display:none;} .noDesktop{display:block;}
.robo{
	font-family: 'Roboto Slab', serif;
}
.iconWidthHome{
	width:20%;
}
.iconWidth{
	width:23%;
}
.whosFor .uspBoxes{position: relative; margin-top: 0px; }
.displayFlex{display: block;}
}


/* iPhone 6, 7, & 8 in portrait & landscape */
@media screen and (max-width: 768px) {
	
	.topBarHolder{width: 95%; margin: 0 auto; text-align: center; flex-direction: column; align-items: flex-start;}
	.logoHolder{ width: 70%; padding-top: 20px; margin-bottom: 15px; text-align: left;}
	.navHolder{width: 10%; margin: 0 auto; text-align: center; display: none; flex-direction: column; width: 100%;}
	.navItem{ float:left; font-size:14px; font-weight: bold; margin: 5px; padding: 10px 0; border-top: 1px solid #ccc; width: 100%;}
    .menuToggle {display: block !important; margin-left: auto; position: absolute; top: 25px; right: 20px;}
    .navHolder.show {display: flex;}
	.demoButtonHolder{width: 100%;} .demoButton{width: 100%; margin-left: 0px; font-size: 1rem;}
	.titleHeader{width: 60%; top: 60px;}

.container {
	width: 100%; 
	background-color: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
	text-align:center;
}	
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
  .swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}
.tagline{
	color: #0F3073 /* #BE1E2D */;
	font-size:30px;
	font-weight:bold;
}
.menuButtons{
	float:left;
	font-size:13px; font-weight: bold;
	width:15%;
	text-align:left;
	height:50px;
	margin-top:15px;
}
.UpComingOuterBox{
	margin-left:20px !important; margin-bottom: 20px !important; width:93% !important;
}
.UpComingInnerBox{	
	width:97%;
}
.UpComingProgName{
	font-weight:bold;
	font-size:30px;
	height:50px;
}
.UpComingProgNameCHPT{
	font-weight:bold;
	font-size:30px;
	height:50px;
}
.footerDivs{width: 100%; margin: 0 auto; padding: 40px;}
.footerText{
	font-size:20px;
	text-align:left;
	color:#FFF;
	width:100%;
}
.smIcons{margin-left: 40px;}
.pageText{
	font-size:20px;
	text-align:justify;
	padding:20px;
}

.flexCenter{display: block;}
.displayTable{
	display:table; overflow:visible; margin: 0 auto;
	width:100%;
}
.otherServices{
	text-align:justify;
	font-size:30px;
	width:90%;
	margin-right:25px;
}
.companyIntro{
	width:95%;
	margin: 5px;
	font-size:30px;
	text-align:justify;
	float:none;
	margin-left:17px;
}  
  
.fontSize60{
	font-size: 40px;	
}
.fontSize40{
	font-size: 35px;
}
.fontSize30{
	font-size: 40px;
}
.fontSize20{
	font-size: 25px;
}
.fontSize19{
	font-size: 30px;
}
.fontSize16{
	font-size: 20px;
}
.fontSize14{
	font-size: 18px;
}
.fontSize12{
	font-size: 16px; /* 18px; */
}
.fontSize10{
	font-size: 14px;
}
.width100Percent{
	margin: 0 auto;
	width: 100%;
}
.width90Percent{
	margin: 0 auto;
	width: 95%;
}
.width80Percent{
	margin: 0 auto;
	width: 100%;
}
.width70Percent{
	margin: 0 auto;
	width: 95%;
}
.width65Percent{
	width: 65%;
}
.width60Percent{
	width: 60%;
}
.width50Percent{
	margin: 0 auto;
	width: 98%;
}
.width48Percent{
	margin: 0 auto;
	width: 100%;
}
.capWidth48Percent{
	margin: 0 auto;
	width: 100% !important;
}
.width49Percent{
	margin: 0 auto;
	width: 100%;
}
.width45Percent{
	margin: 0 auto;
	width: 100%;
}
.width45Percent2{
	margin: 0 auto;
	width: 48%;
}
.width40Percent{
	margin: 0 auto;
	width: 40%;
}
.fontSize38{
	font-size: 90px;
}
.width30Percent{
	margin: 0 auto;
	width: 100%;
}
.width25Percent{
	margin: 0 auto;
	width: 100%;
	padding: 0px 10px;
}
.width20Percent{
	margin: 0 auto;
	width: 100%;
}
.width20Percent2{
	margin: 0 auto;
	width: 40%;
}
.width10Percent{
	margin: 0 auto;
	width: 100%;
}
.height165{
	height: 40px;
}

.noMobile{
	display:none;
}
.noDesktop{
	display:block;
}
.iconWidthHome{
	width:20%;
}
.iconWidth{
	width:31%;
}
.height600{
	height:1180px;
}
.enrollButton{
	color:#FFF;
	font-size:40px;
	width:80%;
	margin-right:50px;
	text-align:center;
}
.ExOuterBox{
	height: 190px;
	width:48%; 
}
.ExInnerBox{
	text-align:left;
	background-color:#FFF;
	width:94%;
	height:170px;
	padding:5px;
	margin-left:8px;
}
.ExProgName{
	font-size:21px;
	height:170px;
	line-height: 1; 
	padding: 0px 5px 10px 0px;
}
.ExProgNameCHPT{
	font-size:18px;
	height:170px;
	line-height: 1; 
	padding: 0px 5px 10px 0px;
}





.keyFeaturesContainer{display:block;}
.keyFeatures{margin-top: 80px;}
.cta {	
	height: 500px;            /* set a fixed height (adjust as needed) */
	text-align: center; width: 100%; margin: 0 auto;
	padding: 30px;
	font-size: 1.2rem;        /* optional: adjust for readability */
  }
  .ctaHolder{display: block; width: 100%; margin: 0 auto;}
  .ctaButtons{
	display: block;	
	font-size: 1.5rem;        /* optional: adjust for readability */
	margin: 0px; margin-top: 20px; margin-bottom: 10px;
	width: 100%;	 
  }

  .uspHolder {
    flex-direction: column;  /* Stack the boxes vertically */
    align-items: center;     /* Center the boxes horizontally */
    gap: 30px;               /* Increase spacing for touch comfort */
    width: 90%;              /* Adjust container width */
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .uspBoxes {
    width: 100%;             /* Full width for mobile */
    padding: 20px; margin-bottom: -20px;
    text-align: center;
  }

  .uspHolder1 {
    flex-direction: column;  /* Stack the boxes vertically */
    align-items: center;     /* Center the boxes horizontally */
    gap: 30px;               /* Increase spacing for touch comfort */
    width: 100%;              /* Adjust container width */    
	margin-top: 60px;
    margin-bottom: 60px;
  }

  .uspBoxes1 {
    width: 90%;             /* Full width for mobile */
    padding: 20px;
    text-align: center;
	border-radius: 30px 30px 30px 30px;
	padding-bottom: 40px;
  }
  .VMdiv{width: 50%; margin: 0 auto;}
  .displayFlexTop{display: block;}
  .aboutBoxLeft{padding: 20px; width: 100%; margin: 0 auto;}
  .aboutBoxRight{padding: 20px; width: 100%; margin: 0 auto}

	.productPageHeading{width: 100%; top: 180px; padding: 25px;}	
	
	.industries ul li{margin-bottom: 10px; margin-left: 40px; line-height: 22px;}
	.slide-content{min-height: 1550px;}

	.stepper {gap: 1px; margin-top: 80px;}
	.label {font-size: 0.5rem; max-width: 70px;}
	.stickyServices {top: 180px;}
	.consultingHeading{margin-top: 200px;}
	.whosFor .uspBoxes{margin-top: 30px; }
	.serviceSection01 .width60Percent{width: 90%; margin: 0 auto;}
	.serviceSection02 .width60Percent{width: 90%; margin: 0 auto;}
	.serviceSection03 .width60Percent{width: 90%; margin: 0 auto;}
	.serviceSection03 .width90Percent{width: 85%; margin: 0 auto;}

	.segmentsHolder{width: 100%; gap: 5px; }
	.segment{font-size: 0.5rem; padding: 3px; min-width: 80px; border-radius: 5px;}
	.segmentHeading{font-size: 1.5rem;}
	.segmentDescription{width: 90%;}
	.questionNumber{width: 25%;}
	.quest{font-size: 0.9rem; line-height: 1.2rem;}

	form .gaix li input[type=radio] {left: 30%;}
	
	.team-container {
		flex-direction: column;
	  }
	
	  .team-list {
		width: 100%;
		padding: 10px;
	  }
	
	  .team-grid {
		grid-template-columns: repeat(2, 1fr); /* Or 1 column if space is tight */
	  }
	
	  .team-details {
		width: 100%;
		padding: 20px;
	  }
	
	  .team-details img {
		width: 120px;
		height: 120px;
		margin: 0 auto 15px auto;
		display: block;
	  }
	  .team-name{font-size: 18px;} .team-profile{font-size: 14px;}
	  .teamName{margin-top:0px; width: 180px; margin-left: 15px;}
	  .memberName{font-size: 18px !important;}
	  .drRizImages{width: 100%; margin: 0 auto;}
	  .DrRizInfo{width: 100%; margin: 0 auto; }
	  .VMdiv{width: 100%; margin: 0 auto;}
	  .displayFlex{display: block;}

	  .hero{top: 10px;}

	.hero-content {
	grid-template-columns: 1fr;
	text-align: center;
	}
	
	.hero-text h1 {
		font-size: 2.5rem;
	}
	
	.overview-content,
	.faculty-card {
		grid-template-columns: 1fr;
	}
	.faculty-holder {					
		margin-left: 0px;
	}
	
	.nav-links {
		display: none;
	}
	
	.cta-features {
		grid-template-columns: 1fr;
	}

	.benefit-card {
		min-width: 90%;
	}	  
	.instruction{width: 85%;}
}