.primary-colour {
    color: #D99900 !important;
}

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

.secondary-colour {
    color: #500C23 !important;
}

.secondary-bg-colour {
    background-color: #500C23 !important;
}

.my-button {
    background-color: #500C23 !important;
    border: none;
}

.nav-active {
    color: white !important;
    border-radius: 20px !important;
    padding: 15px !important;
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
}

.profile-heading {
    font-weight: bold;
    font-size: 20px;
}

/* # Vaibhavam */
.bio-card {
    background: #fffdf0; /* Slightly lighter shade for contrast */
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: auto; 
    margin: auto;
}

.bio-card h2 {
    font-weight: bold;
    text-align: left;
    color: #723a4e !important;
}

.info-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: baseline;
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid #e0c97c;
}

.info-title {
    font-weight: bold;
    min-width: 180px;
    padding-right: 10px;
    color: #b28b00;
}

.info-content {
    flex: 1;
    color: #444;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .info-row {
        flex-direction: column;
    }

    .info-title {
        min-width: 100%;
        padding-bottom: 5px;
    }
}

.kainkaryam-card {
    background: #fffdf0;
    /* Slightly lighter shade */
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: auto;
    margin: auto;
    text-align: left;
}

.kainkaryam-card h2 {
    font-weight: bold;
    text-align: left;
    color: #723a4e !important;
}

.kainkaryam-list {
    padding-left: 20px;
}

.kainkaryam-list li {
    margin-bottom: 10px;
    color: #444;
}

.indented-list {
    margin-left: 40px;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .kainkaryam-card {
        padding: 15px;
    }
}

/* # Vaibhavam end */

/* # Books */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .grid .h2{
    margin-bottom: 2px;
  }
  .card {
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
  }

  .card:hover {
    transform: scale(1.02);
  }

  .title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #222;
  }

  .detail {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 6px;
  }

  @media (max-width: 992px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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