.content img {
  max-width: 100%; /* Ensure images do not exceed the container width */
  height: auto; /* Maintain aspect ratio */
  display: block;
  margin: 0 auto; /* Center images horizontally */
  width: 100%; /* Force images to fit within the column width */
  box-sizing: border-box; /* Include padding and borders in the width calculation */
}

a {
  text-decoration: none; /* Remove underline from all links */
}

a:hover {
  text-decoration: underline; /* Optional: Add underline on hover for better UX */
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensure content is spaced evenly */
}

.row > .col-md-4 {
  margin-bottom: 20px; /* Add vertical spacing between columns */
}

.row {
  gap: 0px; /* Optional: Use gap for consistent spacing in modern browsers */
}

/* Filosofi Grid Layout */
.philosophy-grid {
  display: grid;
  gap: 30px;
  margin-bottom: 40px;
}

.philosophy-grid.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.philosophy-grid.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
  }
}

.philosophy-card {
  padding: 25px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

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



    .card {
      border: none; /* Menghilangkan border default card */
      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .card:hover {
      transform: translateY(-5px); /* Efek mengangkat saat di-hover */
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
    }
    .display-4 {
      font-weight: 700;
      color: #ffffff;
    }
    h3 {
      font-weight: 600;
      color: #947200; /* Warna biru primer Bootstrap */
    }    

    .philosophy-letter {
      font-size: 1.5rem;
      font-weight: 700;
      color: #947200;
    }
    .cta-card {
        background: linear-gradient(45deg, #947200, #F1E5AC); /* Gradien biru yang menarik */
        color: white;
    }
    .list-group-item {
        border: none; /* Menghilangkan border pada item list */
        padding-left: 0;
    }

    .philosophy-card .card-title {
      margin-bottom: 10px; /* Add some space between title and text */
    }
    .filosofi-item .letter {
      font-size: 3rem;
      font-weight: 900;
      color: var(--bs-primary);
      line-height: 1;
    }
    .cta-section {
      background-color: #e9ecef; /* Warna netral pengganti --bs-primary-bg-subtle */
    }

/* Memberikan lebar tetap pada container huruf di halaman About/Test */
.filosofi-letter-box {
  width: 65px;      /* Menetapkan lebar yang konsisten */
  flex-shrink: 0;   /* Mencegah box menyusut saat di dalam flex container */
}

/* Floating WA Button */
.floating-wa-button {
    position: fixed; /* Make it float */
    bottom: 25px;
    right: 25px;
    background-color: #25D366;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999; /* High z-index to be on top */
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border: none;
}

.floating-wa-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    color: white;
    text-decoration: none;
}

.floating-wa-button svg {
    margin-right: 8px;
}

:root {
    --bs-primary: #947200;
    --bs-primary-rgb: 148, 114, 0;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #947200;
    --bs-btn-border-color: #947200;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7a6000;
    --bs-btn-hover-border-color: #7a6000;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5c4700;
    --bs-btn-active-border-color: #5c4700;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #947200;
    --bs-btn-disabled-border-color: #947200;
}

.btn-outline-primary {
    --bs-btn-color: #947200;
    --bs-btn-border-color: #947200;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #947200;
    --bs-btn-hover-border-color: #947200;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #947200;
    --bs-btn-active-border-color: #947200;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #947200;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #947200;
    --bs-gradient: none;
}

.text-primary {
    color: #947200 !important;
}

.bg-primary {
    background-color: #947200 !important;
}