:root {
  --background-color: #ffffff;
  --default-color: #323b3b;
  --heading-color: #163535;
  --accent-color: #2c7a7b;
  --nav-hover-color: #2c7a7b;
}

/* Blue */
.theme-blue {
  --heading-color: #1a365d;
  --accent-color: #3182ce;
  --nav-hover-color: #3182ce;
}

/* Green */
.theme-green {
  --heading-color: #1b4332;
  --accent-color: #2d6a4f;
  --nav-hover-color: #2d6a4f;
}

/* Purple */
.theme-purple {
  --heading-color: #4a2c6d;
  --accent-color: #7b2cbf;
  --nav-hover-color: #7b2cbf;
}

/* Orange */
.theme-orange {
    --heading-color: #9a3412;
    --accent-color: #f97316;
    --nav-hover-color: #f97316;
}

.theme-switcher {
    position: fixed;
    top: 120px;
    right: 20px;
    z-index: 9999;

    background: #fff;
    padding: 12px 8px;
    border-radius: 30px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15);

    display: flex;
    flex-direction: column;   /* Vertical */
    align-items: center;
    gap: 10px;
}

.theme-switcher .color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    transition: transform 0.3s ease;
}

.theme-switcher .color:hover {
    transform: scale(1.2);
}

.theme-switcher .blue {
    background: #3182ce;
}

.theme-switcher .green {
    background: #2d6a4f;
}

.theme-switcher .purple {
    background: #7b2cbf;
}

.theme-switcher .orange {
    background: #f97316;
}

.main-image {
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    z-index: 1;
}

.main-image img {
    width: 100%;
    height: 450px;   /* Adjust as needed */
    object-fit: cover;
}

.image-stack{
    position: relative;
}

.secondary-image{
    position: absolute;
    bottom: -30px;
    right: -30px;
    z-index: 10;   /* higher than carousel */
}

.carousel,
.carousel-inner,
.carousel-item{
    position: relative;
}


.member-image {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto;
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* or contain */
}

.custom-form-bg {
    background:  color-mix(in srgb, var(--accent-color) 15%, white);
    padding: 30px;
    border-radius: 10px;
}