html{
	scroll-behavior: smooth;
}
.navbar {
	background:#011b3d; 
}
.collapse a {
	color:#131212;  
	text-decoration: thick;
	border-radius: 10%; /* Adjust this value to control the button shape */
	transition: background-color 0.3s ease;	
}
.nav-item ul{
	list-style: none;
}

#submenu{
	opacity:0;
	position:absolute;
	top:35px;
	visibility:hidden;
	z-index:1;
	background-color: white;
	padding: 5px 30px 5px 3px;
	border-radius: 1px;

}
	.navbar-dark .navbar-nav .nav-link{
		padding: 15px;
	}
	

li:hover ul#submenu{
	opacity:1;
	top:50px;
	visibility:visible;
	text-align: left;
}

.nav-link #submenu-link {
	text-decoration:none;
  }
  .navbar-nav  li a:hover {
	color:#f57f21;} 

.navbar .webT{
	font-size: 20px;
}
/*Slider*/
.carousel-item{
	height: 500px;
}
.crs-img-1{
	background: url('../img/banner.png');
	background-size: cover;
	background-position: center;
	width:100%;
}
.crs-img-2{
	background: url('../img/Future generation.png');
	background-size: cover;
	background-position: center;
	width:100%;
}
.crs-img-3{
	background: url('../img/Solutions Slide.png');
	background-size: cover;
	background-position: center;
	width:100%;
}
.crs-img-4{
	background: url('../img/Ethical IT.png');
	background-size: cover;
	background-position: center;
	width:100%;
}
 
/* my header text side */
.primary-my-headers{
	font-size: 61px;
}

/*Showcase*/
#showcase .fas{
	font-size:35px;
}
#showcase{
	display:flex;
	justify-content:space-between;
}

/*Get Started*/
#get-started{
	background:url('../img/thought.png');
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
	min-height: 300px;
}
#get-started .inner-overlay{
	background:rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%
}

/*Info */
#info .infoS{
	margin-top:70px;	
}
#info img{
	border-radius: 5px;
}

/*Gallery*/
#gallery img{
	max-height: 200px;
	width: 100%;
}

/*About Section*/
#about{
	background:url('../img/About Us .png');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 300px;
	position: relative;
}
#about .inner-overlay, #services .inner-overlay, #blog .inner-overlay ,
#contact .inner-overlay{
	background:rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 300px;
}
.contact-main{
	border:2px solid #eeb471;
}
#about-services .fas{
	font-size:50px;
}

/*Services Section*/
/*Services Header*/
#services{
	background:url('../img/Offerings.png');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 300px;
	position: relative;
	transition: transform 0.4s ease-in-out;
}

#services-faq{
	height: 400px;
}
#services-faq .card{
	cursor: pointer;
}
#blog{
	background:url('../img/blogbanner.png');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 300px;
	position: relative;
}
#blog-post img{
	height: 200px;
	width: 100%;
}
#contact{
	background:url('../img/Contact Us.png');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 300px;
	position: relative;
}

@media (max-width: 991px){

	/* Sub menu pop-up*/
	#submenu{
		width: 80%;
		margin-left: 0px;
	}
	li:hover ul#submenu{
		margin-top: 120px;
	}


	.primary-my-headers{
		font-size: 20px;
		font-weight: bold;
	}
	#info .infoS{
		margin-top:0px;html{
			scroll-behavior: smooth;
		}
			
	/*Showcase*/
		#showcase .fas{
			font-size:35px;
		}
		#showcase{
			display:flex;
			justify-content:space-between;
		}
		
	/*Get Started*/
		#get-started{
			background:url('https://businessfirstfamily.com/wp-content/uploads/2015/09/corporate-office-interior-design.jpg');
			background-attachment: fixed;
			background-size: cover;
			position: relative;
			background-repeat: no-repeat;
			min-height: 250px;
		}
		#get-started .inner-overlay{
			background:rgba(0,0,0,0.7);
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%
		}
		
		/*Info */
		#info .infoS{
			margin-top:70px;
			
		}
		#info img{
			border-radius: 5px;
		}
		
		/*Video*/
		#video{
			position: relative;
			background:url('../img/video.jpg');
			background-size: cover;
			background-attachment: fixed;
			background-repeat: no-repeat;
			min-height: 300px;
		
		}
		#video .video-overlay{
			position: absolute;
			min-height: 300px;
			top: 0;
			left: 0;
			width: 100%;
			background: rgba(0,0,0,0.7);
		}
		#video .fas{
			color: #ff0000;
			font-size: 50px;
		}
		
		/*Gallery*/
		#gallery img{
			max-height: 200px;
			width: 100%;
		}
	
		/*About Page*/
		
		/*About Section*/
		#about{
			background:url('../img/New-slider1.png');
			background-attachment: fixed;
			background-size: cover;
			background-repeat: no-repeat;
			min-height: 300px;
			position: relative;
		}
		#about .inner-overlay, #services .inner-overlay, #blog .inner-overlay ,
		#contact .inner-overlay{
			background:rgba(0,0,0,0.7);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 300px;
		}
		#about-services .fas{
			font-size:50px;
		}
		
		/*Services Section*/
		/*Services Header*/
		#services{
			background:url('../img/slider-img4.jpg');
			background-attachment: fixed;
			background-size: cover;
			background-repeat: no-repeat;
			min-height: 300px;
			position: relative;
			transition: transform 0.4s ease-in-out;
		}
		.container h2{
			color:#ff9100;
		}
		#services-faq{
			height: 400px;
		}
		#services-faq .card{
			cursor: pointer;
		}
		#blog{
			background:url('img\Aboutpage image.png');
			background-attachment: fixed;
			background-size: cover;
			background-repeat: no-repeat;
			min-height: 300px;
			position: relative;
		}
		#blog-post img{
			height: 200px;
			width: 100%;
		}
		#contact{
			background:url('../img/gallery7.jpg');
			background-attachment: fixed;
			background-size: cover;
			background-repeat: no-repeat;
			min-height: 300px;
			position: relative;
		}
		
		@media (max-width: 991px){
			#info .infoS{
				margin-top:0px;
			}
			#gallery img{
				height: 120px;
			}
		}
		@media(max-width:767px){
		
			#get-started .gC{
				margin-top: 0 !important;
			}
			#info p{
				font-size: 15px;
				margin-top: 0;
			}
			#info h3{
				font-size: 20px;
				margin-bottom: 5px;
			}
			#about-services .card {
				margin: 5px 0;
			}
			#services-faq h5{
				font-size: 13px;
			}
			#services-faq p{
				font-size: 10px;
			}
			#services-table .text-center.display-4 {
				font-size: 30px;
			}
		}
		
		@media(max-width: 575px){
			#showcase .col-lg-4.col-md-4{
				width: 60%;
				margin: 0 auto;
			}
			#showcase h3{
				margin: 0;
			}
			#info .infoS{
				width: 70%;
				margin: 0 auto;
				margin-bottom:25px;
			}
			#gallery img{
				width: 80%;
				height: 200px;
			}
		
			#gallery .col-lg-4.col-md-4.col-sm-4{
				width: 80%;
				height: 200px;
				margin: 5px auto;
				margin-left: 50px;
			}
		
			#services-faq{
				height: 600px;
			}
		}
		@media(max-width: 420px){
			.navbar .navbar-brand {
				width: 75%;
			}
			#myCarousel .display-4    {
				font-size: 45px !important;
			}
			#showcase .lead{
				font-size: 16px ;
			}
			#get-started  .lead{
				font-size: 16px ;
				margin-top: 0;
			}
			#get-started  h3{
				margin-bottom: 0;
			}
			#gallery .col-lg-4.col-md-4.col-sm-4{
				width: 100%;
				height: 200px;
				margin: 5px auto;
				margin-left: 50px;
			}	
		}
		align-right{
			display:flex;
			justify-content: flex-start;
		}
		
	}
	#gallery img{
		height: 120px;
	}
}
@media(max-width:767px){

	#get-started .gC{
		margin-top: 0 !important;
	}
	#info p{
		font-size: 15px;
		margin-top: 0;
	}
	#info h3{
		font-size: 20px;
		margin-bottom: 5px;
	}
	#about-services .card {
		margin: 5px 0;
	}
	#services-faq h5{
		font-size: 13px;
	}
	#services-faq p{
		font-size: 10px;
	}
	#services-table .text-center.display-4 {
		font-size: 30px;
	}
}

@media(max-width: 575px){
	#showcase .col-lg-4.col-md-4{
		width: 60%;
		margin: 0 auto;
	}
	#showcase h3{
		margin: 0;
	}
	#info .infoS{
		width: 70%;
		margin: 0 auto;
		margin-bottom:25px;
	}
	#gallery img{
		width: 80%;
		height: 200px;
	}

	#gallery .col-lg-4.col-md-4.col-sm-4{
		width: 80%;
		height: 200px;
		margin: 5px auto;
		margin-left: 50px;
	}

	#services-faq{
		height: 600px;
	}
}
@media(max-width: 420px){
	.navbar .navbar-brand {
		width: 75%;
	}
	#myCarousel .display-4    {
		font-size: 45px !important;
	}
	#showcase .lead{
		font-size: 16px ;
	}
	#get-started  .lead{
		font-size: 16px ;
		margin-top: 0;
	}
	#get-started  h3{
		margin-bottom: 0;
	}
	#gallery .col-lg-4.col-md-4.col-sm-4{
		width: 100%;
		height: 200px;
		margin: 5px auto;
		margin-left: 50px;
	}	
}
aalign-right{
	display:flex;
	justify-content: flex-start;
}

#hrservices{
	background:url('../img/HR-1.png');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 400px;
	position: relative;
	transition: transform 0.4s ease-in-out;

}
#itservices{
	background:url('../img/IT services.png');
    background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 400px;
	position: relative;
	transition: transform 0.4s ease-in-out;

}
#trainingservices{
	background:url('../img/Training.png');
    background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 400px;
	position: relative;
	transition: transform 0.4s ease-in-out;

}
#productservices{
	background:url('../img/Products (1).png');
    background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 400px;
	position: relative;
	transition: transform 0.4s ease-in-out;

}


.container h2{
	color:#ff9100;
}

.testimonial-slider {
	width: 50%; /* Adjust width as needed */
  }
  
  .testimonial-item {
	padding: 20px;
	text-align: center;
  }
  
  .testimonial-item img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-bottom: 10px;
  }
  
  .testimonial-item p {
	font-size: 16px;
	margin-bottom: 5px;
  }
  
  /* Optional: Style navigation buttons and pagination */
  .swiper-button-prev,
  .swiper-button-next {
	color: #fff;
  }
  
  .swiper-pagination-bullet {
	background: #ccc;
  }
  .swiper-pagination-bullet-active {
	background: #000;
  }
  .testimonial-card {
	width: 500px; /* Adjust width as needed */
	margin:0 auto;
	background-color: #f5f5f5; /* Light gray background */
	padding: 50px;
	border-radius: 5px; /* Rounded corners */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	margin-bottom: 20px; /* Spacing between cards */
	text-align: center; /* Center testimonial content */
  }

  .container1{
	background: url('../img/Subhanu Banner.png');
	background-size: cover;
	background-position: center;
	width:100%;
}
@media only screen and (max-width: 767px) {
	.testimonial-slider {
	  width: 100%; /* Make slider full width on mobile */
	}
	.testimonial-item {
	  /* Additional styles for mobile layout, 
		 e.g., adjust font size or padding */
		 font-size:larger;
	}
  }


/*contact sheet form
.card-body {

	/*border: 0.3px solid #ff9100; /* Set the border color here 
}
*/


.container2 {
	max-width: 1000px;
	margin: 20px auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
}


input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea {
	width: 100%;
	padding: 10px;
	margin: 0px 0;
	border: 2px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	
}
textarea {
	height: 150px;
}
/*clear option*/
input[type="button"] {
	background-color: white; /*  color */
	margin-right: 10px;
	border: none;
	border-radius: 0px;
	cursor: pointer;
	color:rgb(228, 216, 216);
	transition: color 0.3s ease;
}
input[type="button"]:hover {
	color: #334597; /* Light red color */
}
.button-style {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: right;
	transition: color 0.3s ease;
}
.button-style:hover {
	background-color: #45a049;
}
.container2 {
	display: grid;
	grid-template-columns: 1fr 1fr; /* Two columns with equal width */
	grid-gap: 10px; /* Optional gap between columns */
  }
  
  .column {
	/* Optional: Add styling */
	padding: 10px;
	border: 0px solid #ccc;
  }
  /*contact sheet form ends*/


  /*mycode/
  /about section*/
  
  @media only screen and (max-width: 50%) {
	.collapsible-title {
	  cursor: pointer;
	  padding: 10px;
	  background-color: white;
	  margin: 0;
	  font-size: 18px;
	  color: black;
	  /* Added hover styles */
	  &:hover {
		color: orange; /* Text color changes to orange on hover */
	  }
	}
  }
  @media only screen and (max-width: 768px) {
	.overlay {
	  position: static; /* Remove absolute positioning on small screens */
	  margin-top: 20px; /* Add spacing after the collapsible content */
	}
  }
  @media only screen and (max-width: 768px) {
	#content-wrapper {
	  flex-direction: column; /* Stack elements vertically on small screens */
	}
  
	#left,
	#right {
	  width: 100%; /* Make sections full width on small screens */
	}
  
	#overlay {
	  position: static; /* Remove absolute positioning on small screens */
	  margin-top: 20px; /* Add spacing after the collapsible content */
	}
  }

  /*responsive for all*/
  @media (max-width: 991px){
	#info .infoS{
		margin-top:0px;
	}
	#gallery img{
		height: 120px;
	}
}
@media(max-width:767px){

	#get-started .gC{
		margin-top: 0 !important;
	}
	#info p{
		font-size: 15px;
		margin-top: 0;
	}
	#info h3{
		font-size: 20px;
		margin-bottom: 5px;
	}
	#about-services .card {
		margin: 5px 0;
	}
	#services-faq h5{
		font-size: 13px;
	}
	#services-faq p{
		font-size: 10px;
	}
	#services-table .text-center.display-4 {
		font-size: 30px;
	}
}

@media(max-width: 575px){
	#showcase .col-lg-4.col-md-4{
		width: 60%;
		margin: 0 auto;
	}
	#showcase h3{
		margin: 0;
	}
	#info .infoS{
		width: 70%;
		margin: 0 auto;
		margin-bottom:25px;
	}
	#gallery img{
		width: 80%;
		height: 200px;
	}

	#gallery .col-lg-4.col-md-4.col-sm-4{
		width: 80%;
		height: 200px;
		margin: 5px auto;
		margin-left: 50px;
	}

	#services-faq{
		height: 600px;
	}
}
@media(max-width: 420px){
	.navbar .navbar-brand {
		width: 75%;
	}
	#myCarousel .display-4    {
		font-size: 45px !important;
	}
	#showcase .lead{
		font-size: 16px ;
	}
	#get-started  .lead{
		font-size: 16px ;
		margin-top: 0;
	}
	#get-started  h3{
		margin-bottom: 0;
	}
	#gallery .col-lg-4.col-md-4.col-sm-4{
		width: 100%;
		height: 200px;
		margin: 5px auto;
		margin-left: 50px;
	}	
}
align-right{
	display:flex;
	justify-content: flex-start;
}

#gallery img{
height: 120px;
}

@media(max-width:767px){

#get-started .gC{
margin-top: 0 !important;
}
#info p{
font-size: 15px;
margin-top: 0;
}
#info h3{
font-size: 20px;
margin-bottom: 5px;
}
#about-services .card {
margin: 5px 0;
}
#services-faq h5{
font-size: 13px;
}
#services-faq p{
font-size: 10px;
}
#services-table .text-center.display-4 {
font-size: 30px;
}
}

@media(max-width: 575px){
#showcase .col-lg-4.col-md-4{
width: 60%;
margin: 0 auto;
}
#showcase h3{
margin: 0;
}
#info .infoS{
width: 70%;
margin: 0 auto;
margin-bottom:25px;
}
#gallery img{
width: 80%;
height: 200px;
}

#gallery .col-lg-4.col-md-4.col-sm-4{
width: 80%;
height: 200px;
margin: 5px auto;
margin-left: 50px;
}

#services-faq{
height: 600px;
}
}
@media(max-width: 420px){
.navbar .navbar-brand {
width: 75%;
}
#myCarousel .display-4    {
font-size: 45px !important;
}
#showcase .lead{
font-size: 16px ;
}
#get-started  .lead{
font-size: 16px ;
margin-top: 0;
}
#get-started  h3{
margin-bottom: 0;
}
#gallery .col-lg-4.col-md-4.col-sm-4{
width: 100%;
height: 200px;
margin: 5px auto;
margin-left: 50px;
}	
}
aalign-right{
display:flex;
justify-content: flex-start;
}

.hrimg{
	margin:50%;
}