body {
  height: auto;
  width: auto;
}

.header {
  margin: 0px;
  padding: 0px;
}

.header-section {
            display: flex;
            align-items: center;
            background-color: #1d1238; /* Adjust the background color as needed */
            color: #ffa100; /* Adjust the text color as needed */
            padding: 0px; /* Adjust the padding as needed */
}
#header {
  height: 100px;
}
.logo{
	/*z-index: 1000;*/
	flex: 30%;
	margin-left: 0Px;
/*	width: 40%; 
	margin-top: 0Px;
	height: 75px;
	background-color: #000000; 
	float: left; */
}
.menu {
	z-index: 1000;
	flex: 70%; 
	text-align: right; 
	position:relative;
	margin-right:15px;
/* added for submenu*/
	white-space:nowrap;
/*	background-color: #000000; */
/* 	margin-right:10px;*/
/*	width: 60%; 
	margin-top:0px
	height: 30px;
	float: left; */
}

.menu-toggle {
	display: block;
	background: none;
	border: none;
	cursor: pointer;
	position: absolute;
	left:5px;
}

#menu ul {
  margin: 0px;
  padding:0;
  list-style: none;
/* 	width: 100%;*/
/*  height:87px;*/
/*	margin-right: 10px*/
/*  margin-right: -10px;*/
/*  push towards right*/
/*  background: #000000;*/
}
/*display menu in horizontal line*/
#menu li {
  display: inline-block;
  position:relative;
/*  height:50px;*/
}

#menu li a {
	margin-top: 0px;
	margin-left: 10px;
	color: #FF0000;
	text-decoration: none;
	display: block;
	/*background:blue;*/
	padding: 10px;
	height: auto ; /*height adjusted for submenu was 54px*/
	width: auto;
	/*line-height: 35px;*/
}

.mobile-menu-icon {
    display: none;
	color: white;
	background: transparent;
    border: none;
    position: fixed; 
    left: 15px;
    top: 30px; 
    cursor: pointer;
    z-index: 1001;
	/*    
	color: white;
    background: red; 
	z-index: 1001;*/
}

@media only screen and (max-width: 768px) {
    .menu {
        text-align: left;
        background-color: black;
		margin-left:15px;
		width:220px;
		
    }

    #menu ul {
        display: none;
        position: absolute;
        top: 6px;
        left: 0;
        width: 100%;
        background-color: black;
        text-align: left;
		height: 8px;
    }

    #menu li {
        display: block;
        background-color: black;
    }

    #menu li a {
        display: block;
        padding: 10px;
        color: #ffa100; 
        text-decoration: none;
        background-color: black;
		z-index: 1002;		
    }

    #menu li:hover {
        background-color: black;
		z-index: 1002;	
    }

    .mobile-menu-icon {
        display: block;
        cursor: pointer;
        color: #ffa100; 
				z-index: 1002;	
				position: fixed;
				right: 20px;
    }

    .submenu {
        background-color: black;
		z-index: 1002;	
		margin-left:25px;
		margin-top:5px;
	}
	
    .submenu a {
		background-color: black;
        color: #ffa100; 
		z-index: 1002;	
    }
	#menu > ul > li > ul {
		margin-top:5px;
		margin: 0px;
		padding: 0;
		list-style: none;
		display: inline-block;
		position: relative;
		padding-left: 20px; 
	}

}

#menu li a:hover {
  color: white;
  text-decoration: none;
  /*background: url(img/manu1.png);*/
  height: 35px;
  width: 100px;
  line-height:35px;
}
.submenu {
	display: none; /* it was block changed for submenu no block display*/
	height:auto;
	text-align:left;
	position: absolute;
	top: 100%; /* Position the submenu below the parent menu item */
	background-color: #000000; /* Adjust the background color as needed */
	padding: 0px;
	width: auto; /* Set the width of the submenu */
	/* added fro submenu */
	white-space:normal;
	min-width:210px;
	z-index:1000;
}

.menu li:hover .submenu {
	display: block;
}

.submenu a {
	list-style:none;
	display: block;
	color: #fff; /* Adjust the link color as needed */
	text-decoration: none; /* Remove underline from links */
	margin-left: 15px ; /* Add margin between submenu items */
}
.head-sec {
        width: 45%; /* Adjust the width for the menu block */
		height:325px;
		margin-top: 10px;
		margin-left: 5px;
		margin-right:0px;
		margin-bottom:0px;
		list-style-type: none;
		text-align:center;
        background-color: #000000; /* Background color for menu */
        float: left; /* Float the menu block to the left */
}

.video-container {
	margin-top:50px
	margin-left:15px;
	display: flex;
	flex-directon: column;
	/* Use flexbox to create a horizontal layout */
	justify-content: space-between; /* Add space between the videos */
	margin: 10px; /* Add margin for spacing */
}
video {
	width: 48%; /* Set the width to 100% of the viewport */
	height: auto; /* Maintain the aspect ratio */
/*	object-fit: cover;
	display: block ;*/
}
.video-container1 {
	margin-top:50px
	margin-left:15px;
	display: flex;
	flex-directon: column;
	/* Use flexbox to create a horizontal layout */
	justify-content: space-between; /* Add space between the videos */
	margin: 10px; /* Add margin for spacing */

video {
	width: 100%; /* Set the width to 100% of the viewport */
	height: auto; /* Maintain the aspect ratio */
/*	object-fit: cover;
	display: block ;*/
}
}
.image-container {
	margin-top:50px;
	margin-left:15px;
	display: flex;
	flex-directon: column;
	width:100%;
	/* Use flexbox to create a horizontal layout */
	justify-content: space-between; /* Add space between the videos */
	margin: 10px; /* Add margin for spacing */
}
/* Caption text */
.text {
	margin-top:0px;
	color: #000000;
	font-size: 20px;
	padding: 8px 12px;
/*	position: absolute;*/
	bottom: 8px;
	width: 100%;
	text-align: justify;
}

/* click button */
.button {
  border: 1px solid white;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

.button:hover 
{
	background-color: #833569;
}

.section-container {
	margin-top:0px;
	/*margin-left:2px;*/
	display: flex;
	flex-directon: column;
	width: 100%;
	align-items: center;
	/* Use flexbox to create a horizontal layout */
	justify-content: space-between; /* Add space between the videos */
	/*margin: 10px;*/ /* Add margin for spacing */
}
.imagesection1 {
/*	display:flex;*/
	width: 30%; /* Adjust the width for the menu block */
	margin-top: 0px;
	height: Auto;
	margin-bottom:0px;
	list-style-type: none;
	text-align:center; 
	float: left; /* Float the menu block to the left */
}
.imagesection {
/*	display:flex;*/
	width: 30%; /* Adjust the width for the menu block */
	margin-top: auto;
	height: auto;
	margin-left: auto;
	margin-right:0px;
	margin-bottom:20px;
	list-style-type: none;
	margin-left:10px;
	text-align:center;
	float: left; /* Float the menu block to the left */
	flex: 0 0 auto; /* Don't grow or shrink, maintain its initial size */
}

.imagesection img {
		margin-top: auto;
		height: auto;
		margin-left: auto;
		margin-right:0px;
		list-style-type: none;
		text-align:center;
		/*float: left;*/ /* Float the menu block to the left */
		flex: 0 0 auto; /* Don't grow or shrink, maintain its initial size */
    display: block; /* Ensure the image behaves as a block element */
    margin: 0 auto; /* Horizontally center the image */
}

@media only screen and (max-width: 768px) {
	.imagesection img {
    margin-top: auto;
		margin-left: auto;
		margin-right:0px;
		list-style-type: none;
		text-align:center;
		/*float: left;*/ /* Float the menu block to the left */
		flex: 0 0 auto; /* Don't grow or shrink, maintain its initial size */
    display: block; /* Ensure the image behaves as a block element */
    margin: 0 auto; /* Horizontally center the image */
    width: 100%;
    height: 100%;
	}
}

.section3 {
/*	display:flex;*/
	width: 70%; /* Adjust the width for the menu block */
	margin-top: 0px;
	height: 250px;
	margin-bottom:0px;
	list-style-type: none;
	text-align:center;
	float: left; /* Float the menu block to the left */
}

.section {
/*	display:flex;*/
	width: 70%; /* Adjust the width for the menu block */
	height: auto;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom:10px;
	list-style-type: none;
	text-align:center;
	display: block;
	float: left; /* Float the menu block to the left */
}
.line {
	height: 2px; /* Set the height of the line */
	width: 100%; /* Set the width to 100% to span the container */
	background-color: #ffa0000; /* Set the color of the line */
	margin: 0 20px; /* Add margin for spacing */
}

/*for image scrolling*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width: 100%;
  height:auto;
  position: relative;
  margin: 10px;
  animation-name: ;
  /*margin-left: 40px;*/
}

/* Hide the images by default */
.mySlides {
  display: none;
  width: 100%;
  height: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin-top:2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/*scrolling image ends here*/


/*grid buttons*/
.container {
  position: relative;
  width: 19.65%;
  max-width: auto;
  display:inline-block;
}

/* Make the image to responsive */
.image {
  width: 100%;
  height: auto;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: blue;
}

/* When you mouse over the container, fade in the overlay icon*/
.container:hover .overlay {
  opacity: 1;
}

/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

/* When you move the mouse over the icon, change color */
.fa-user:hover {
  color: #eee;
}
/*grid buttons ends here*/

/*our services sections in the 1st page*/
.box-wrapper {
	height: 85vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	background:#3498DB;
}
 
#box1 {
	padding: 10px;
	/*border: solid 1px green*/
}
 
#box2 {
	padding: 8px;
	border: solid 1px black
}
 
#box3 {
	padding: 10px;
	display: flex;
	flex-direction: row;
	border: solid 1px green
}
 
#box {
	width:33.33%;
	margin: 0 8px;
	border: solid 1px orange;
	background:#B2BABB;
	height: 55vh;
}
/*our services sections in the 1st page ends here*/
/*body scan images in the 1st page*/
.box-image-wrapper {
	height: 85vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
}

#image-box1 {
	padding: 0px;
	display: flex;
	flex-direction: row;
}

#image-box2 {
	padding: 0px;
	display: flex;
	flex-direction: column;
}
/*body scan images in the 1st page ends here*/

/*contact us*/
.split {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
}

.split > * {
	width: calc(50% - 2.5em);
}

.split > :nth-child(2n - 1) {
	padding-right: 2.5em;
	border-right: solid 2px rgba(255, 255, 255, 0.15);
}

.split > :nth-child(2n) {
	padding-left: 2.5em;
}

.split.style1 > :nth-child(2n - 1) {
	width: calc(66.66666% - 2.5em);
}

.split.style1 > :nth-child(2n) {
	width: calc(33.33333% - 2.5em);
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: blue;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #7541CA;
}

/*contact us end here*/


/*.box {
  margin: 0px auto;
  width: 960px;
  background-color: ghostwhite;
  height: 700px;
  max-height: 2200px;
}

.news {
  margin: 0px auto;
  margin-left: 20px;
  margin-top: 20px;
  display: inline-block;
  background-image: url('img/bgr.png');
  background-size: 960px, 500px;
  width: 670px;
  height: 500px;
  max-height: 2000px;
}

.news h1 {
  background-image: url('img/news.png');
  font-style: normal;
  font-size: 30px;
  color: white;
  width: 670px;
  height: 38px;
}

.part {
  margin: 0px auto;
  margin-left: 700px;
  margin-top: -95px;
  background-image: url('img/bgr.png');
  background-size: cover;
  width: 240px;
  height: 300px;
  max-height: 2000px;
}

.part h1 {
  background-image: url('img/side.png');
  font-style: normal;
  font-size: 30px;
  color: white;
  width: 240px;
  height: 38px;
}*/


/*scroll clients image */
.clients-container {
	margin-top:10px;
  display:flex;
	overflow: hidden;
}

.client-logo {
	margin-top:20px;
	margin-right: 20px; /* Adjust the margin between logos as needed */
	animation: scrollClients 20s linear infinite; /* Adjust the duration as needed */
}

@keyframes scrollClients {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}
	/*scroll client image ends here*/
	/* footer for scrolling image */
	footer {
		background-color: #000000;
		color: #fff000;
		text-align: center;
		padding: 10px;
	}
		.scrolling-logo {
			animation: scrollLogo 5s linear infinite; /* Adjust the duration as needed */
		}

		@keyframes scrollLogo {
			from {
				transform: translateX(-100%);
			}
			to {
				transform: translateX(200%);
			}
		}
	}
}	

.social-container {
	margin-top:10px
	margin-left:10px;
	display: flex;
	flex-directon: column;
	margin: 10px; /* Add margin for spacing */
	height:50px;
	text-align:center;
}
.social-container img{
	margin-right:10px;
  display: inline-block;
}  

/* scrolling ends here*/

 /*for image scrolling*/
/* {box-sizing:border-box}*/

/*footer scrolling starts here*/

#callButton {
    background-color: #ffa100;
    color: black;
    padding: 10px 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    left: 20px;
}
/* popup container for autopopulate after few seconds on the screen*/
.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ccc;
	z-index: 1000;
}

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}
/* popup container ends here */