/* Header */

body 
{
	font-family: arial;
	font-size: 0.875rem;
	color: #333;
	line-height: 1.5;
	margin: 0rem;
	padding: 0rem;
	background-color: #F2F3F4;
	font-family: 'Bree Serif';
}

header 
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 0.5rem;
	background: linear-gradient(45deg, #F8F9F9 0%, #D5D8DC 50%, #F2F4F4 100%);
	border-bottom: 1px solid #566573;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
	position: sticky;
	top: 0;
	z-index: 100;
}

.logo 
{
	font-size: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	color: #34495E;
}

.menu-toggle 
{
    cursor: pointer;
}

.brand a
{
	text-decoration: none;
	color: #34495E;
}

.nav 
{
	display: flex;
	list-style: none;
	margin: 0rem;
	padding: 0rem;
}

.nav-item 
{
	margin: 0rem;
	padding: 0rem;
	margin-right: 2rem;
	font-weight: bold;
	text-decoration: none;
	font-size: 1rem;
}

.nav a
{
	color: #333;
	text-decoration: none;
}

.nav-item img
{
	margin: 0rem;
	padding: 0rem;
	width: 0.8rem;
	height: 0.8rem;
}

@media screen and (max-width: 1023px) 
{

.logo 
{
	display: flex;
	width: 100%;	
}

.menu-toggle 
{
	flex-basis: 5%;
}

.brand
{
	flex-basis: 95%;
	text-align: center;
}

.brand a
{
	font-size: 1.2rem;
}

.nav
{
	display: none;
}

}

/* Menu Bar */

.mobile-menu 
{
	position: fixed;
	left: 0;
	right: 0;
	background: linear-gradient(45deg, #F8F9F9 0%, #D5D8DC 50%, #F2F4F4 100%);
	border-right: 1px solid #566573;
	text-align: left;
	display: none;
	width: 12.5rem;
	height: 100%;
	z-index: 1000;
	transition: left 0.3s; /* Add a smooth transition effect */
}

.menu-img
{
	display: flex;
	justify-content: center;
	margin: 0.4rem 0;
}

.menu-img img
{
	margin: 0rem;
	padding: 0rem;
	width: 5rem;
	height: 5rem;
}

.mobile-menu a 
{
	display: block;
	padding: 0.7rem 1rem;
	color: #34495E;
	text-decoration: none;
	transition: background-color 0.3s; /* Add a hover effect */
	font-weight: bold;
	font-size: 1rem;
}

.mobile-menu a:hover 
{
    background-color: #34495E; 
	color: #fff;
}

.menu-img-contacts
{
	display: flex;
	justify-content: left;
	margin: 0.4rem 0rem;
}

.menu-img-contacts img
{
	margin: 0rem;
	padding: 0rem;
	width: 1.5rem;
	height: 1.5rem;
}

.menu-img-contacts a:hover 
{
	background-color: transparent; 
}

/* Head Video */

.head-video-container 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0rem;
	padding: 0rem;
	color: #fff;
	white-space: nowrap;
}

.video-background 
{
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 10%;
	padding-bottom: 40%; /* 21:9 aspect ratio video images from pixabay */
	text-align: center;
}

video 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.content 
{
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3rem;
}

.content2
{
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.5rem;
}

@media screen and (max-width: 768px) 
{
	
.video-background 
{
	padding-bottom: 60%; /* 21:9 aspect ratio video images from pixabay */
}

.content 
{
	font-size: 1rem;
}

.content2
{
	font-size: 0.8rem;
}

}

/* Industries */

.industries 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	text-align: center;
	margin: 0rem;
	padding: 0rem;
	font-weight: bold;
	color: #34495E;
}

.industries-title 
{
	flex-basis: 100%;
	font-size: 3rem;
	padding: 0rem;
	margin: 0rem;
	margin-top: 3rem;
}

.industry 
{
	flex-basis: 17%;
	padding: 0.5rem;
	margin: 0.5rem;
	font-size: 1rem;
	border: 0.063rem solid #ddd;
	border-radius: 0.625rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.industry img
{
	padding: 0rem;
	margin: 0rem;
	width: 7rem;
	height: 7rem;
}

@media screen and (max-width: 768px) 
{

.industry 
{
	flex-basis: 40%;
	margin: 0.25rem;
	padding: 0.25rem;
}

.industries-title 
{
	font-size: 1.5rem;
}

.industry img
{
	padding: 0rem;
	margin: 0rem;
	width: 5rem;
	height: 5rem;
}

}

/* Services */

.services-container 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0rem;
	padding: 0rem;
	color: #34495E;
	font-weight: bold;
	position: relative;
}

.services-title
{
	flex-basis: 100%;
	font-size: 3rem;
	padding: 0rem;
	margin: 0rem;
	margin-top: 3rem;
}

.services-background
{
	display: flex;
	width: 100%;
    height: 30.3rem; 
    background-image: url('../images/back.png'); 
    background-size: cover; 
    background-position: center; 
	background-repeat: no-repeat;
}

.service 
{
	flex-basis: 40%;
	padding: 0.5rem;
	margin: 0.5rem;
	font-size: 1.5rem;
}

.service img
{
	padding: 0rem;
	margin: 0rem;
	width: 7rem;
	height: 7rem;
	transform-origin: center;
	transition: transform 0.5s ease-in-out;
}

.service img.in-view 
{
  transform: rotate(360deg);
}

.service p
{
	padding: 0.5rem;
	margin: 0.5rem;
	font-size: 1.2rem;
	text-align: justify;
	color: #333;
	font-weight: normal;
}

/* Image Scroller */

.slider-container 
{
	width: 100%;
	overflow: hidden;
	position: relative;
}

.slider-content 
{
  display: flex;
  transition: transform 1s ease; /* Adjust the transition duration */
}

.slide 
{
  flex: 0 0 100%; /* Ensure each slide takes the full width */
}

.slide img 
{
	width: 100%;
	height: 30.3rem;
	max-width: 100%;
	display: block;
}

.slider-dots 
{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot 
{
  width: 12px;
  height: 12px;
  background-color: #bbb;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active 
{
  background-color: #333;
}

.wave-svg 
{
   position: absolute;
   bottom: 0;
   width: 100%;
   height: auto;
}

@media screen and (max-width: 768px) 
{

.services-title
{
	font-size: 2rem;
}

.services-background 
{
	height: 16rem; 
}

.service 
{
	flex-basis: 100%;
	font-size: 1.2rem;
}

.service img
{
	width: 5rem;
	height: 5rem;
}

.service p
{
	font-size: 1rem;
}

.slide img 
{
	width: 100%;
	height: 11.3rem;
	max-width: 100%;
	display: block;
}

}

/* Technology Stack */

.techstack-container 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0rem;
	padding: 0rem;
	color: #34495E;
	font-weight: bold;
}

.techstack-title
{
	flex-basis: 100%;
	font-size: 3rem;
	padding: 0rem;
	margin: 0rem;
	margin-top: 3rem;
}

.techstack-container p
{
	padding: 0.5rem;
	margin: 0.5rem;
	font-size: 1.2rem;
	text-align: justify;
	color: #333;
	font-weight: normal;
}

.carousel-container 
{
   width: 100vw;
   margin: auto;
   margin-top: 2rem;
   overflow: hidden;
}

.carousel-wrapper 
{
	display: flex;
	animation: scroll 20s linear infinite; /* Adjust the duration as needed */
}

.carousel-image 
{
	width: 6rem;
	height: 4rem; 
	margin: 1rem; 
}

@keyframes scroll 
{
	0% 
	{
		transform: translateX(0);
	}
	100% 
	{
		transform: translateX(-1900px); /* Number of images you want to scroll, in this case it is 19 */
	}
}

.expertise-container
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background: linear-gradient(45deg, #D2B4DE 0%, #D6EAF8 50%, #D2B4DE 100%);
	margin: 0rem;
	padding: 0rem;
	margin-top: 5rem;
}

.expertise 
{
	flex-basis: 30%;
	padding: 0.5rem;
	margin: 0.5rem;
	margin-top: -4rem;
	font-size: 1.5rem;
	transition: transform 0.3s ease; /* Add smooth transition effect */
}

.expertise:hover 
{
    transform: scale(1.1); /* Increase the size on hover */
}

.expertise img
{
	padding: 0rem;
	margin: 0rem;
	width: 7rem;
	height: 7rem;
	border-radius: 100%;
}

.expertise p
{
	padding: 0.5rem;
	margin: 0.5rem;
	font-size: 1rem;
	text-align: justify;
	color: #333;
}

@media screen and (max-width: 768px) 
{

.techstack-title
{
	font-size: 2rem;
}

.techstack-container p
{
	font-size: 1rem;
}

.expertise-container
{
	margin-top: 1rem;
}

.expertise 
{
	flex-basis: 80%;
	margin-top: 1rem;
}

.expertise img
{
	width: 4rem;
	height: 4rem;
}

}

/* Choose us*/

.chooseus_container 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0rem;
	padding: 0rem;
}

.chooseus-title
{
	flex-basis: 100%;
	font-size: 3rem;
	padding: 0rem;
	margin: 0rem;
	margin-top: 3rem;
	text-align: center;
	color: #34495E;
	font-weight: bold;
}

@media screen and (max-width: 768px) 
{

.chooseus-title 
{
	font-size: 2rem;
}

}

/* Counter */

.counter 
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   text-align: center;
   width: 100%;
   margin: 0rem;
   color: #78281F;
}

.counter-item 
{
   padding: 1rem 3rem;
   font-size: 1rem;
}

.counter-item span 
{
   font-size: 4rem;
   font-weight: bold;
}

@media screen and (max-width: 768px) 
{

.counter-item 
{
   flex-basis: 40%;
   padding: 0.5rem;
   font-size: 1rem;
}

.counter-item span 
{
   font-size: 3rem;
   font-weight: bold;
}

}

/* Round Circled List */

.custom-ol 
{
   list-style: none;
   padding: 0.5rem;
   counter-reset: item;
   margin-top: 0rem;
   text-align: justify;
}

.custom-ol li 
{
   position: relative;
   margin: 1rem;
   margin-left: 3rem;
   font-size: 1.2rem;
}

.custom-ol li::before 
{
   content: counter(item); 
   counter-increment: item;
   position: absolute;
   left: -2rem;
   width: 1.8rem; 
   height: 1.8rem; 
   background-color: #34495E; 
   color: #fff; 
   border-radius: 50%; 
   text-align: center;
   line-height: 1.8rem; 
   font-weight: bold; 
   margin-top: 0rem;
}


@media screen and (max-width: 768px) 
{

.custom-ol li 
{
   margin-left: 2rem;
   font-size: 1rem;
}

}

/* Testimonials */

.testimonials 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0rem;
	padding: 0rem;
	font-family: 'Bree Serif';
	background: linear-gradient(45deg, #063D41 0%, #13A9B3 50%, #0F7F33 100%);
}

.testimonials-title 
{
	font-size: 3rem;
	padding: 0rem;
	margin: 0rem;
	margin-top: 3rem;
	font-weight: bold;
	color: #fff;
}

.testimonial 
{
	padding: 2rem;
	padding-top: 0rem;
	background: transparent;
	animation: fade 10s ease infinite; /* Fading animation - 10s each testimonial */
	display: none;
	opacity: 0;
	transition: opacity 1s;
	color: #fff;
	font-size: 1.2rem;
	margin: 0rem;
}

.testimonial.active 
{
	display: block;
	opacity: 1;
}

.quote
{
	margin: 0rem;
	padding: 0rem;
	width: 1.5rem;
	height: 1.5rem;
}

.testimonial-person
{
	margin: 0rem;
	padding: 0rem;
	height: 8rem;
	width: 8rem;
}

@keyframes fade 
{
	0%, 100% { opacity: 0; }
	10%, 90% { opacity: 1; }
}

.star-container 
{
    display: flex;
	justify-content: center;
}

.star 
{
    padding: 0rem;
	margin: 0rem;
	width: 3rem;
	height: 2rem;
}

@media screen and (max-width: 768px) 
{
	
.testimonials-title 
{
	font-size: 2rem;
}

.testimonial
{
	padding: 1rem;
	padding-top: 0rem;
	font-size: 1rem;
}

.quote
{
	width: 1rem;
	height: 1rem;
}

}


/* Contact Us */

.contacts 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0rem;
	padding: 0rem;
	font-family: 'Bree Serif';
	font-size: 1.2rem;
}

.contacts-title 
{
	font-size: 3rem;
	padding: 0rem;
	margin: 0rem;
	margin-top: 3rem;
	font-weight: bold;
	color: #34495E;
}

.contact 
{
	margin: 0rem;
	padding: 2rem;
	padding-top: 0;
	color: #333;
}

.call-container 
{
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.call 
{
    flex-basis: 20%;
}

.call img
{
	padding: 0rem;
	margin: 0rem 3rem;
	width: 3rem;
	height: 3rem;
	transform-origin: center;  /* For 360 degree rotation */
	transition: transform 0.5s ease-in-out;
}

.call img.in-view 
{
  transform: rotate(360deg); /* For 360 degree rotation */
}

.call p
{
	padding: 0rem;
	margin: 0rem;
}

.call a
{
	padding: 0rem;
	margin: 0rem;
	color: #34495E;
}

@media screen and (max-width: 768px) 
{

.contacts 
{
	font-size: 1rem;
}

.contacts-title 
{
	font-size: 2rem;
}

.contact 
{
	padding: 1rem;
}

.call
{
	flex-basis: 100%;
	margin: 1rem;
}

}

/* About us */

.about
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0rem;
	padding: 0rem;
	color: #fff;
	background: linear-gradient(45deg, #424949 0%, #17202A 50%, #34495E 100%);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	font-family: 'Bree Serif';
}

.about-title 
{
	font-size: 3rem;
	padding: 0rem;
	margin: 0rem;
	margin-top: 3rem;
}

.about img
{
	margin: 0rem;
	margin-top: 1rem;
	padding: 0rem;
	width: 12rem;
	height: 12rem;
}

.about p
{
	font-size: 1.2rem;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 1rem;
	padding-top: 0;
	margin: 0;
	text-align: justify;
}

@media screen and (max-width: 768px) 
{

.about p 
{
	font-size: 1rem;
}

}

/* Footer */

footer 
{
	background-color: #000;
	color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	padding: 1rem;
	text-align: center;
}

.footer-links 
{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0rem;
}

.footer-links a 
{
	margin: 0rem 0.5rem;
}

.footer-links img
{
	width: 2rem;
	height: 2rem;
	margin: 0rem;
	padding: 0rem;
}
