
:root {
    --forest: #123F3B;
    --teal: #0F4C5C;
    --teal-dark: #0A3641;
    --accent: #D96C4A;
    --accent-dark: #B95234;
    --cream: #F7F3EB;
    --sage: #DDE8E1;
    --ink: #17313A;
    --muted: #587078;
}

body {
    color: var(--ink);
    background: #fff;
}

/* Top strip */
body>nav.navbar {
    position: relative;
    z-index: 9999;
    background-color: var(--teal) !important;
    border: 0 !important;
}

body>nav .nav-link {
    color: #fff !important;
}

body>nav .nav-link:hover {
    color: #FAD9C8 !important;
}

/* Main navigation */
.navbar-nav .nav-link {
    color: var(--teal-dark);
    font-weight: 600;
    padding: 12px 18px;
    transition: .3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--accent);
    background: none;
}

.dropdown-menu {
    border:none;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,12);
}

.dropdown-item {
    color: var(--ink);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--teal-dark);
    background: var(--sage);
}

/* Buttons and prominent calls-to-action */
.btn1 .btn {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #fff !important;
}

.btn1 .btn:hover {
    background-color: var(--teal-dark) !important;
    border-color: var(--teal-dark) !important;
}

a.btn[style*="e6005c"],
button[style*="e6005c"] {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #fff !important;
}

a.btn[style*="e6005c"]:hover,
button[style*="e6005c"]:hover {
    background-color: var(--teal-dark) !important;
    border-color: var(--teal-dark) !important;
}

.btn-danger {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background-color: var(--teal-dark) !important;
    border-color: var(--teal-dark) !important;
}

/* Hero: replaces the black/pink/blue contrast with a richer teal gradient */
.carousel .bg-dark {
    background: linear-gradient(150deg, var(--teal-dark), var(--forest)) !important;
}

.carousel-item img[style*="e6005c"] {
    background: linear-gradient(90deg, var(--sage) 0%, #F7F3EB 48%, #BFDAD2 100%) !important;
}

.carousel h2 {
    color: #fff;
}

/* Content panels */
section.py-5 .container[style*="oklch"],
div.container[style*="oklch"],
.story[style*="oklch"] {
    background-color: var(--cream) !important;
    border-color: #D7E0D9 !important;
    box-shadow: 0 8px 22px rgba(15, 76, 92, .12) !important;
}

.story[style*="oklch"] {
    box-shadow: none !important;
}

/* Headline accents and text links */
h3 span[style*="e6005c"],
.story button[style*="e6005c"] {
    color: var(--accent) !important;
}

/* Impact aur Partners section */
.impact-section,
.partners-section {
    background-color: var(--cream);
    padding: 48px 0;
}



.impact-section .btn-primary:hover{
    color: #fff !important;
    background-color: var(--accent) !important;
}



/* Partners button ko blue ki jagah theme colour */
.impact-section .btn-primary,
.partners-section .btn-primary {
    background-color: var(--cream) !important;
    border-color: var(--accent) !important;
    color: black !important;
    border-radius: 30px !important;
    padding: 10px 25px;
    font-weight: 500;
}

.impact-section .btn-primary:hover,
.partners-section .btn-primary:hover {
    background-color: var(--accent) !important;
    border-color: var(--teal) !important;
}

.partners-section .btn-primary:hover {
    color: #fff !important;
    background-color: var(--accent) !important;
}

/* Scroll animation: sirf card/impact/partner boxes */
.reveal .card,
.reveal .impact-section .border.rounded,
.reveal .partners-section .border.rounded {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .55s ease-out, transform .55s ease-out;
}

.reveal.show .card,
.reveal.show .impact-section .border.rounded,
.reveal.show .partners-section .border.rounded {
    opacity: 1;
    transform: translateY(0);
}

a.btn[style*="003b8f"],
p[style*="003b8f"] {
    color: var(--teal) !important;
}

/* Cards and impact tiles */
.card,
.shadow-sm {
    border-color: #E2E8E4 !important;
    box-shadow: 0 8px 20px rgba(15, 76, 92, .12) !important;
}

.card {
    border-radius: 16px;
    overflow: hidden;
    transition: 3s;
}

.card:hover{
    transform: translateY(-8px);
}

.card .btn {
    color: var(--teal) !important;
    font-weight: 700;
}

.card .btn:hover {
    color: var(--accent) !important;
}

.story .border.rounded {
    border-color: #D7E0D9 !important;
}

.story h2 {
    color: var(--teal);
    font-weight: 800;
}


/* Keyboard accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid #F0A382;
    outline-offset: 3px;
}

/* Scroll animation */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0);
}



.reveal.show .card,
.reveal.show .border {
    opacity: 1;
    transform: translateY(0);
}

.reveal.show .col:nth-child(1) .card,
.reveal.show .col:nth-child(1) .border {
    transition-delay: 0.1s;
}

.reveal.show .col:nth-child(2) .card,
.reveal.show .col:nth-child(2) .border {
    transition-delay: 0.25s;
}

.reveal.show .col:nth-child(3) .card,
.reveal.show .col:nth-child(3) .border {
    transition-delay: 0.4s;
}

.reveal.show .col:nth-child(4) .border {
    transition-delay: 0.55s;
}

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal .card,
    .reveal .border {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Footer */
footer.bd-footer {
    background-color: var(--teal-dark) !important;
}

footer .container.rounded {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 0 var(--accent) !important;
}

footer a {
    color: #D4E9E1;
}

footer a:hover {
    color: #FAD9C8;
}

footer [style*="oklch(0.707"] {
    color: #B8D4CA !important;
}