/* Google Fonts: Poppins */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #ffffff;
  color: #222;
}

/* Logo styling */
.logo {
  font-weight: 700;
  font-size: 1.5rem;
}

.logo .itstudio {
  color: #00334E; /* Deep navy */
}

.logo .ni {
  color: #009688; /* Teal accent */
}

/* Header nav links */
nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #00334E;
  font-weight: 500;
}

nav a:hover {
  color: #009688;
}

/* Hero section base styling */
.hero {
  background-color: #00334E;
  padding: 30px 0;  /* Subpage default: reduced hero height */
  color: #ffffff;
}

.home-hero {
  padding: 100px 0; /* Taller for homepage hero */
}

.sub-hero {
  padding: 30px 0; /* Optional: clarify subpage hero spacing */
}

@media (max-width: 768px) {
  .hero {
    padding: 50px 0; /* All heroes shrink on mobile */
  }
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
}

.hero h1 .highlight {
  color: #009688;
}

.hero p {
  font-size: 1.1rem;
  max-width: 500px;
  color: #e0e0e0;
}

/* Profile image in hero — with sub-hero size fix */
.profile-img {
  max-height: 400px;  /* Fallback for mid-screens */
  width: auto;
  border-radius: 50%;  /* Perfect circle if image is square */
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
  .profile-img {
    max-height: 500px; /* Homepage hero big */
  }
  .sub-hero .profile-img {
    max-height: 300px; /* Subpage hero image smaller */
  }
}

@media (max-width: 768px) {
  .profile-img {
    max-height: 250px; /* Mobile hero image smaller */
  }
}

/* Primary buttons */
.btn-primary {
  background-color: #009688;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
}

.btn-primary:hover {
  background-color: #00796B;
}

/* Outline buttons */
.btn-outline-primary {
  border-radius: 50px;
  color: #009688;
  border-color: #009688;
}

.btn-outline-primary:hover {
  background-color: #009688;
  color: #fff;
}

/* Services section */
.services {
  padding: 80px 0;
}

.service-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 30px;
  transition: transform 0.2s ease;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-icon {
  width: 100px;
  height: auto;
  margin-bottom: 15px;
}

/* Contact form block */
#contact-form {
  background-color: #F4F8FB;
}

/* Footer */
footer {
  background-color: #00334E;
  color: #ffffff;
  font-size: 0.9rem;
}

footer a {
  color: #ffffff;
}

footer a:hover {
  text-decoration: underline;
}

.client-card {
  background-color: #F4F8FB;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.client-card:hover {
  transform: translateY(-3px);
}