:root {
  /* --- Primary Brand Colors --- */
  --color-primary: #0F48AF;   /* Deep blue – trust, stability */
  --color-secondary: #0B409C; /* Medium blue – supportive tone */
  --color-accent: #0274B2;    /* Bright blue – highlights, links, buttons */

  /* --- Action / Impact Colors --- */
  --color-danger: #DA1A25;    /* Deep red – urgency, passion */
  --color-highlight: #FE3231; /* Bright red – calls to action or donation */

  /* --- Base / Neutral Colors --- */
  --color-white: #FFFFFF;     /* Backgrounds, text contrast */
  --color-light: #F8F9FA;     /* Light background variant */
  --color-dark: #0B1526;      /* Optional dark text tone */
}

/* color palete */
.text-primary {
    color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.bg-accent {
    background-color: var(--color-accent) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.text-highlight {
    color: var(--color-highlight) !important;
}

.bg-highlight {
    background-color: var(--color-highlight) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.text-light {
    color: var(--color-light) !important;
}

.bg-light {
    background-color: var(--color-light) !important;
}

.text-dark {
    color: var(--color-dark) !important;
}

.bg-dark {
    background-color: var(--color-dark) !important;
}



.gallery-item img {
  width: 100%;
  height: 300px; /* adjust height as desired (e.g., 250px, 350px, etc.) */
  object-fit: cover; /* ensures image fills frame without distortion */
  object-position: center; /* keeps subject centered */
  border-radius: 10px; /* optional for smooth edges */
}


.founder-img-wrapper {
  max-width: 350px;   /* adjust this number to control size */
  aspect-ratio: 3 / 4; /* keeps the original proportions consistent */
  overflow: hidden;   /* ensures nothing bleeds out */
}

.founder-img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;  /* preserves natural look without stretching */
  object-position: center; /* centers the image nicely */
}






/* --- Logo and Name Styling --- */
.famous_logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.logo-img {
    height: 70px;      /* Adjust as needed */
    width: auto;
    object-fit: contain;
}

.famous_logo h1 {
    font-size: 1.8rem; /* Balanced text size beside the logo */
    line-height: 1.2;
    font-weight: 700;
    color: #0066cc;
}

@media (max-width: 768px) {
    .logo-img {
        height: 50px;
    }
    .famous_logo h1 {
        font-size: 1.4rem;
    }
}

.timeline {
  position: relative;
  margin: 0 auto;
  padding: 2rem 0;
  max-width: 900px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--bs-primary);
  transform: translateX(-50%);
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 1.5rem 2rem;
}
.timeline-item.left { left: 0; }
.timeline-item.right { left: 50%; }
.timeline-item .timeline-icon {
  position: absolute;
  top: 15px;
  right: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-item.right .timeline-icon {
  left: -24px;
  right: auto;
}
.timeline-item .timeline-content {
  border-radius: 0.5rem;
}
@media (max-width: 767px) {
  .timeline::before { left: 8px; }
  .timeline-item, .timeline-item.left, .timeline-item.right {
    width: 100%;
    left: 0;
    padding-left: 3rem;
    margin-bottom: 2rem;
  }
  .timeline-item .timeline-icon {
    left: 0;
    right: auto;
  }
}
@media (max-width: 768px) {
  .gallery-item img {
    height: 200px;
  }
}