/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
  color: #0a192f;
  background-color: #f9f9f9;
  overflow-x: hidden;
}

/*
  Define CSS custom properties for the site’s primary accent colour. These
  variables make it easy to keep the palette consistent across the
  navigation, buttons, icons and other elements. Adjust the values
  below to fine‑tune the hue and hover state of the accent colour.
*/
:root {
  --primary: #4da8ff;
  --primary-hover: #3685d9;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation */
#navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(10, 25, 47, 0.9);
  backdrop-filter: blur(8px);
  z-index: 999;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/* Logo image in the navigation */
.logo-link {
  display: flex;
  align-items: center;
}
.logo-img {
  height: 45px;
  width: auto;
}

.logo {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.logo span {
  color: var(--primary);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links li a {
  color: #ffffff;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  color: var(--primary);
}

/* Hamburger Menu (mobile) */
#menu-toggle {
  display: none;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  width: 25px;
}

.hamburger span {
  height: 3px;
  width: 100%;
  background: #ffffff;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 60px;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: calc(100% - 60px);
    background: #0a192f;
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    transition: right 0.3s ease;
  }
  .nav-links li a {
    color: #ffffff;
    font-size: 1.2rem;
  }
  #menu-toggle:checked ~ .nav-links {
    right: 0;
  }
  .hamburger {
    display: flex;
  }
}

/* Hero section */
.hero {
  position: relative;
  height: 100vh;
  background-image: url('../assets/hero-bg.png');
  background-size: cover;
  background-position: center;
  /* Fix the background relative to the viewport to achieve a subtle parallax effect
     as the user scrolls. This keeps the hero background stationary while the
     content moves over it, creating depth. */
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 25, 47, 0.75);
}

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

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}


.hero-title .highlight {
  color: var(--primary);
}

.hero-subtitle {
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  color: #cdd3df;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

.btn-secondary {
  background: #ffffff;
  color: #0a192f;
  border: 2px solid #ffffff;
}
.btn-secondary:hover {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* Section padding */
.section-padding {
  padding: 80px 0;
}

.section-title {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  color: #0a192f;
}

.section-subtitle {
  max-width: 700px;
  margin: 0 auto 3rem;
  text-align: center;
  color: #556070;
  font-size: 1rem;
}

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

.service-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.service-icon {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.service-card h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #0a192f;
}

.service-card p {
  font-size: 0.95rem;
  color: #556070;
}

/* About Section */
.about-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.about-text {
  flex: 1 1 400px;
}

.about-text h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #0a192f;
}

.about-text p {
  margin-bottom: 1rem;
  color: #556070;
  line-height: 1.6;
}

.about-image {
  flex: 1 1 400px;
  display: flex;
  justify-content: center;
}

.about-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* CTA Section */
.cta {
  position: relative;
  /* Use the dark abstract wave graphic to match the new logo palette */
  background-image: url('../assets/dark-wave.png');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  padding: 100px 0;
  overflow: hidden;
}

.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 25, 47, 0.75);
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.cta-content p {
  margin-bottom: 2rem;
  font-size: 1rem;
  color: #d6dce7;
}

/* Portfolio */
.portfolio-gallery {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}

.portfolio-item {
  position: relative;
  min-width: 280px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.portfolio-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.portfolio-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(10, 25, 47, 0.85), transparent);
  color: #ffffff;
}
.portfolio-overlay h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

/* Contact */
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.contact-info {
  flex: 1 1 300px;
}
.contact-info h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #0a192f;
}
.contact-info p {
  margin-bottom: 1rem;
  color: #556070;
}
.contact-details li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: #556070;
}
.contact-details li i {
  color: var(--primary);
  margin-right: 0.75rem;
  font-size: 1.2rem;
}
.contact-details a {
  color: #556070;
  transition: color 0.3s ease;
}
.contact-details a:hover {
  color: var(--primary);
}

.contact-form-wrapper {
  flex: 1 1 300px;
}

.contact-form {
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 1rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #0a192f;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.contact-form button {
  width: 100%;
  margin-top: 0.5rem;
}

/* Footer */
.footer {
  background: #0a192f;
  color: #a3b2c2;
  padding: 60px 0 30px;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.footer-logo {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}
.footer-logo span {
  color: var(--primary);
}

.social-links a {
  color: #a3b2c2;
  margin: 0 0.5rem;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}
.social-links a:hover {
  color: var(--primary);
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-nav a {
  color: #a3b2c2;
  transition: color 0.3s ease;
}
.footer-nav a:hover {
  color: var(--primary);
}

.footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  color: #7f93a9;
}

.citations {
  margin-top: 1rem;
  text-align: center;
  color: #8da0b3;
  font-size: 0.7rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}



@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .contact-grid {
    flex-direction: column;
  }
  .portfolio-item img {
    height: 180px;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 0.95rem;
  }
  .service-card {
    padding: 1.5rem;
  }
  .cta {
    padding: 80px 0;
  }
}