/* === Hero Section === */
.hero-section {
  background-image: url('img/hero-image.png');
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
  min-height: 30vh;
  color: white;
}

/* === Global Body Styles === */
body {
  background-color: #0f0f0f;  /* Slightly deeper dark tone */
  color: #f1f1f1;
}

/* === Sections (Koolitööd & Projektid) === */
section#koolitood,
section#projektid {
  background-color: #1a1a1a;
  color: #f1f1f1;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* === Card Styling === */
.card {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border: 1px solid #3a3a3a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.card-body {
  max-height: none;
  overflow: visible;
}

.card-img-top,
.project-img {
  height: 220px;
  object-fit: cover;
  object-position: top center;
  width: 100%;
}

/* === Text Styling === */
.card-title,
.card-body h5,
.card-body p {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #f1f1f1;
}

.card p {
  color: #cccccc; /* Optional: this can be removed if you want all text in white like titles */
}

.subpage-text {
  color: #f1f1f1;
  font-size: 1rem;
  line-height: 1.6;
}

/* === Section Headings === */
section h2 {
  color: #ffffff;
  border-color: #444;
}

/* === Image Rule for a Specific Subpage === */
body.mobiilirakendused-page .img-subpage {
  max-height: 500px;
  object-fit: contain;
  width: 100%;
}

.mobile-img {
  max-height: 600px;     /* You can adjust this value */
  width: auto;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .desktop-indented-text {
    margin-left: 10%; /* Adjust this to get about halfway to the image edge */
  }
}

.clickable-img {
  transition: transform 0.2s ease;
}

.clickable-img:hover {
  transform: scale(1.02);
}

/* Allow full height only for the services card */
.services-card .card-body {
  max-height: none;
  overflow: visible;
}

/* Footer icon style */
.li-badge{
  display:inline-flex;            /* keep the flex centering */
  vertical-align: middle;         /* kill baseline gap */
  line-height: 0;                 /* kill extra line height */
  width:36px; height:36px;
  background:#f7f4f4;             /* white square */
  border-radius:8px;
  align-items:center; justify-content:center;
  text-decoration:none;
  cursor:pointer;
}



.li-glyph{ width:20px; height:20px; display:block; }