/* Base styles */

/* Updated Base Styles */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Roboto', sans-serif;
  background-color: #fff;
  color: #222;
  line-height: 1.6;
  width: 100%;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}

/* Prevent horizontal scroll */
body, html {
  max-width: 100%;
  overflow-x: hidden;
}

/* Improved scrolling behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* Account for fixed header */
}

/* Ensure container has equal margins */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
  box-sizing: border-box;
  width: 100%;
}
/* Improved Header */
.header {
  background: #000;
  color: #fff;
  padding: 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: transform 0.3s ease, background 0.3s ease;
  display: flex;
  height: 70px; /* Reduced base height */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transform: translateY(0); /* Start in view */
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;	/* vertically center */
	height: 100%;	/* fill with header height */
	width: 100%;
	padding: 0 1rem; 	/* horizontal padding only */
	flex-wrap: wrap;
	box-sizing: border-box;
}

/*better image handling */
img{
  max-width: 100%;
  height: auto;
  object-fit: contain; /* Ensures images scale properly */
  display: block; /* Ensures images are treated as block elements */
}

.logo img {
	height: 100%;
	max-height: 50px;
	width: auto;
	object-fit: contain;
/*	display: block;*/
	margin: 0;
	padding: 0;
}

.nav {
	display: flex;
	gap: 1rem; /* reduce gap */
	list-style: none;
	padding: 0;
	margin: 0;
}

.nav a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	padding: 0.5rem;
	font-size: 0.8rem;	
	/*display: inline-block;*/
	padding: 0.5rem;
}

.nav a:hover {
	color: #ff7a00;
}

/* hero section */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url('../images/sun.jpg') center/cover no-repeat;
  color: white;
  text-align: center;
  overflow-x: hidden;
  filter: brightness(0.9);
  padding: 0 1rem; /* Add padding to ensure content doesn't touch edges */
  box-sizing: border-box; /* Ensure padding is included in width */
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 1rem;
  width: 100%;
}

.hero h1 {
  font-size: 3rem;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero .tagline {
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: 2rem;
  color: #eee;
}

/* Ensure text elements don't overflow */
.hero h1,
.hero .tagline {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/*
.hero .container > p::before,
.hero .container > p::after {
  content: none; /* Remove the dashes from footer */
/*} */

.btn { 
	background: #fff;
	color: #000;
	padding: 1rem 2rem;
	text-decoration: none;
	border-radius: 4px;
	transition: 0.3s;
	font-size: 1rem;
	display: inline-block;
}

.btn:hover {
	background: rgba(255,255,255,0.9);
}


section {
	padding: 4rem 1rem;
	/*scroll-margin-top: 100px; /* Adjust to match your header height */
}

.technology,
.applications,
.partners {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60vh; /* Ensure sections have a minimum height */
}

/* Content containers within these sections */
.technology .container,
.applications .container,
.partners .container {
  margin: auto; /* Center vertically */
  width: 100%;
}

/* Section headings */
.technology h2,
.applications h2,
.partners h2 {
  margin: 0 auto 2rem; /* Top margin 0, horizontal auto, bottom 2rem */
  padding-top: 0; /* Remove any extra padding */
  position: relative;
}

h2 {
	text-align: center;
	font-size: 2rem;
	margin: 0 auto 1.5rem; /* top margin 0, auto for horizontal centering, bottom margin for spacing 1.5rem */
  padding-top: 1.5rem; /* Add padding to ensure space above the title */
  position: relative;
  width: 100%; /* Ensure full width for centering */
  display: block; /* Ensure it behaves like a block element */
}

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

.card {
	background: #fafafa;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.card img {
	width: 100%;
	height: auto;
	display: block;
	/*object-fit: cover; /* Optional, if you want to crop instead of squish */
	border-radius: 8px; /* Optional, to match card styling */
}

.card h3 {
	text-align: center;
}

.container > p{
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #666;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Technology section */
.technology {
  padding: 5rem 0;
  background: white;
  text-align: center;
}

/* Technology section specific adjustment */
.technology .container > p,
.applications .container > p,
.partners .container > p {
  margin-bottom: 1.5rem; /* Consistent spacing */
  font-style: normal; /* Remove italic if desired */
}

.team {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
  width: 100%;
  padding: 0 1rem; /* Add padding to ensure content doesn't touch edges */
  box-sizing: border-box; /* Ensure padding is included in width */
}

.member {
	flex: 0 1 calc(50% - 1rem); /* Two members per row with gap */
  max-width: 250px; /* Limit width for larger screens */
  margin: 0; /* Add margin for spacing */
	text-align: center; /*center content within each member box */
  display: flex;
  flex-direction: column;
  align-items: center; /* center items horizontally */
  justify-content: center; /* center items vertically */
}

.member img {
	width: 180px;
	height: 180px;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 1rem;
}

.member h3 {
	margin: 0.5rem 0 0.25rem;
  text-align: center; /* center text */
  width: 100%; /* ensure full width for centering */
}

.member p {
	font-size: 0.9rem;
	color: #666;
  text-align: center; /* center text */
  width: 100%; /* ensure full width for centering */
}

.linkedin-link {
	display: inline-block;
	margin-top: 0.5rem;
	width: 36px;
	height: 36px;
	border-radius: 15%;
	background: url('../images/in.png') center/cover no-repeat;
	overflow: hidden;
	transition: background-color 0.3s ease;
}

.linkedin-link:hover {
	background-color: #005582;
}

.contact form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.contact input,
.contact textarea {
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
}

.contact button {
	background: #000;
	color: #fff;
	padding: 1rem;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
}

.contact button:hover {
	background: #444;
}

/* Application section */
.applications {
  padding: 5rem 0;
  background: #f8f9fa;
  text-align: center;
}

.section-title {
  text-align: center;
  margin-bottom: 0.5rem; /* reduce space below the title */
  font-size: 2rem;
  color: #0a192f;
  position: relative;
}

/* Partners Section */
.partners {
  padding: 3rem 0;
  background: #f8f9fa;
  text-align: center;
}

.partners .container > p::before,
.partners .container > p::after {
  content: "—";
  color: #ff7a00;
  margin: 0 0.5rem;
  position: relative;
  top: -1px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  padding: 0 1rem; /* Add padding to ensure content doesn't touch edges */
  box-sizing: border-box; /* Ensure padding is included in width */
}

.partner-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 0.5rem;
  transition: all 0.3s ease;
}

.partner-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(0.8);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.partner-item:hover img {
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: scale(1.05);
}

.footer {
	background: #000;
	color: #fff;
	text-align: center;
	padding: 0.25rem 0;
	font-size: 0.8rem;
}

.footer .container {
	padding: 1.3rem 1rem;
}

.footer .container > p::before,
.footer .container > p::after {
  content: none; /* Remove the dashes from footer */
}

/* Better touch targets for mobile */
a, button, input, textarea {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Fix only for desktop (≥ 1025px) */
@media (min-width: 1025px) {
  /* Reduce top padding for these sections */
  .technology,
  .applications,
  .partners {
    padding-top: 2.5rem; /* Less space at the top */
    padding-bottom: 3rem;
  }

  /* Adjust heading spacing to stay close to content */
  .technology h2,
  .applications h2,
  .partners h2 {
    margin-top: 0;
    margin-bottom: 1.5rem; /* Tighter spacing below h2 */
  }

  /* Optional: Slightly reduce paragraph spacing */
  .technology p,
  .applications p,
  .partners p {
    margin-bottom: 1.5rem; /* Default is usually 1.5-2rem */
  }
}

/* Media Queries */
@media (max-width: 1024px) {
  .technology,
  .applications,
  .partners {
    min-height: 50vh;
    padding: 3rem 1rem;
  }

	.hero h2 {
		font-size: 2rem;
	}
	
	.hero p {
		font-size: 1rem;
	}
	
	h2 {
		font-size: 1.75rem;
	}
	
	.partners-grid {
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
		gap: 2rem;
	}
}

/* Desktop spacing refinement (≥ 769px) */
@media (min-width: 769px) {
  .technology,
  .applications,
  .partners {
    padding-top: 1rem; /* Reduced from 2.5rem */
    padding-bottom: 3rem;
    scroll-margin-top: 70px; /* Matches header height */
  }

  .technology h2,
  .applications h2,
  .partners h2 {
    margin-top: 0.25rem; /* Small breathing room */
    margin-bottom: 1.25rem; /* Tighter under heading */
  }

  .technology .container > p,
  .applications .container > p,
  .partners .container > p {
    margin-bottom: 2rem; /* Balanced paragraph spacing */
  }
}

/* Fix for tablet margins */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


@media (max-width: 768px) {
  html {
    scroll-padding-top: 60px;
  }

  .technology,
  .applications,
  .partners {
    min-height: auto; /* Let content determine height */
    padding: 2.5rem 1rem;
  }
  
  .technology h2,
  .applications h2,
  .partners h2 {
    margin-bottom: 1.5rem;
  }

  .header {
    height: 60px;
    transition: transform 0.4s ease, background 0.3s ease; /*smoother transition*/
  }

	.header-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 0.5rem 1rem !important;
		box-sizing: border-box;
	}

  .logo img {
    max-height: 40px;
  }

  section:first-of-type{
    margin-top: 60px; /* ensure content is not hidden behind the fixed header */
  }
	
	.nav {
		display: none;
	}

	.hero h2 {
		font-size: 1.75rem;
	}
	
	.hero p {
		font-size: 0.95rem;
	}

  .hero h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .hero .tagline {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
  }
	
	.hero .btn {
		padding: 0.85rem 1.5rem;
		font-size: 0.95rem;
	}
	
	h2 {
		font-size: 1.5rem;
	}
	
	.card h3 {
		font-size: 1.2rem;
		text-align: center;
	}
	
	.partners-grid {
		grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
		gap: 1.5rem;
    }
  
    .partner-item {
		height: 80px;
		padding: 1rem;
	}
	
	.team {
		flex-directions: column;
		align-items: center;
	}
	
	body, html {
		overflow-x: hidden;
		width: 100vw;
	}

  /* Reduce footer padding and font size */
  .footer {
    padding: 0.15rem 0; /* Smaller vertical padding */
    font-size: 0.7rem; /* Smaller text */
  }

  /* Reduce container padding inside footer */
  .footer .container {
    padding: 0.2rem 1rem; /* Tighter spacing */
  }
}

@media (max-width: 480px) {
  section {
    padding: 2rem 0.75rem;
  }
  
  .technology,
  .applications,
  .partners {
    padding: 2rem 0.75rem;
  }

	.container {
		padding: 1rem;
	}
	
	.hero {
		padding: 4rem 1rem;
	}

	.hero h1 {
    font-size: 1.8rem;
  }

  .hero .tagline {
    font-size: 1rem;
  }

	.partners-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	
	.partner-item {
		height: 60px;
		padding: 0.5rem;
	}

  .team {
    gep: 1rem;
    padding: 0 0.5rem;
    /*flex-direction: column;
    align-items: center;*/
  }

  .member {
    flex: 0 1 calc(100% - 0.5rem); /* Full width on small screens */
    max-width: none; /* Remove max-width for smaller screens */
  }
	
	.section-title {
		font-size: 1.5rem;
	}
	
	.btn,
	.contact button {
		font-size: 0.9rem;
		padding: 0.9rem 1.25rem;
	}

  .header-content {
    padding: 0.5rem 1rem !important;
  }

  /* Reduce footer padding and font size */
  .footer {
    padding: 0 0; /* Smaller vertical padding */
    font-size: 0.6rem; /* Smaller text */
  }

  /* Reduce container padding inside footer */
  .footer .container {
    padding: 0.1rem 1rem; /* Tighter spacing */
  }
}


/* Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .hero {
    height: -webkit-fill-available;
    min-height: 100vh;
  }
}

/* Firefox scrollbar fix */
html {
  scrollbar-width: thin;
  scrollbar-color: #ff7a00 #f0f0f0;
}

/* Chrome scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
  background-color: #ff7a00;
  border-radius: 4px;
}