/* --- EXISTING STYLES (Retained) --- */

/* Fade Up Animation */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Delay */
.fade-delay {
  opacity: 0;
  transition: opacity 1s ease-out 0.6s;
}

.fade-delay.show {
  opacity: 1;
}

.fade-delay-2 {
  opacity: 0;
  transition: opacity 1s ease-out 1s;
}

.fade-delay-2.show {
  opacity: 1;
}

/* Typewriter Effect */
.typewriter {
  display: inline-block; /* Changed from block to inline-block */
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #facc15;
  animation: typing 2.5s steps(30), blink 0.7s infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Service Card */
.service-card {
  padding: 2rem;
  background: #1f2937;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform .3s;
}

.service-card:hover {
  transform: scale(1.05);
}

.service-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.service-text {
  color: #9ca3af;
  font-size: .9rem;
}

/* Inputs */
.input {
  width: 100%;
  padding: .75rem 1rem;
  background: #1f2937;
  border: 1px solid #374151;
  color: #fff;
  border-radius: .5rem;
  transition: all .3s;
}

.input:focus {
  outline: none;
  border-color: #facc15;
  box-shadow: 0 0 8px #facc1580;
}

/* --- MOBILE RESPONSIVENESS (The Fix) --- */

@media (max-width: 768px) {
  /* 1. Typewriter Fix: Para hindi lumampas ang text sa mobile */
  .typewriter {
    white-space: normal; /* Pinapayagan na mag-wrap ang text sa phone */
    border-right: none;  /* Tinatanggal ang cursor line para hindi magulo */
    animation: none;      /* Optional: mas safe i-disable ang typing anim sa phone */
    font-size: 1.5rem;   /* Swak na laki para sa mobile titles */
  }

  /* 2. Padding adjustments */
  .service-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  /* 3. Global Container padding */
  body {
    padding: 0 15px; /* Dagdag space sa gilid para hindi dikit sa screen */
  }

  /* 4. Font size scaling */
  .service-title {
    font-size: 1.1rem;
  }
}