@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* --header-height: 3.5rem; */
    --header-height: 128px;

    /* Colors */
    /* --black-color: hsl(220, 24%, 12%);
    --black-color-light: hsl(220, 24%, 15%);
    --black-color-lighten: hsl(220, 20%, 18%);
    --white-color: #fff;
    --body-color: hsl(220, 100%, 97%); */

    /* background: linear-gradient(236.03deg, rgba(246, 230, 230, 0.64) 29.87%, rgba(246, 230, 230, 0) 91%); */
    /* background: linear-gradient(119.75deg, #FAF0F0 0.95%, rgba(252, 213, 213, 0) 59.24%); */
    /* background: linear-gradient(236.03deg, rgba(246, 230, 230, 0.64) 29.87%, rgba(246, 230, 230, 0) 91%); */

    /* style="border-style: none; border-bottom: 1px solid #999999; margin-block: 30px;" */

    --text-primary: #000000;
    --text-secondary: #FFFFFF;
    --bg-primary: #FFFBFB59;
    --bg-secondary: #4f4f4f;
    --text-questionnaire: #452d13;
    /* rgba(255, 251, 251, .35); */
    --bg-news: #F3F1F1D6;
    --bg-form: #669266D6;

    --bg-one-health: #D9D9D945;

    --heading-primary: #228B22;
    --heading-secondary: #BA2F2F;
    --btn-primary: #DF3434;
    --bg-tertiary: #0A0A0A;
    --bg-eleventh: #058338;
    --bg-quinary: #BC5353;
    /* --bg-main: #fefefe; */
    --bg-main: #272525;

    --btn-more: #7E827EA8;
    --bg-link-visit: #CCC8C8;

    --bg-octonary: #FD3232;
    --bg-nonary: #D22D2D;
    --link-active:#F61C1C;

    --btn-bg-wild: #D9D9D982;

    --bg-twelfth: #FFFDFDED;
    /* rgba(255, 253, 253, .93); */
    --bg-thirteenth: #F6F2F2;
    --bg-news: #F3F1F1D6;
    --bg-news-rgba: rgba(243, 241, 241, .84);


    /* Font and Typo */
    /* .5rem = 8px | 1rem = 16px */
    --body-font: "Montserrat", sans-serif;
    --normal-font-size: .938rem;

    /* Font weight */
    --font-regular: 400;
    --font-semi-bold: 600;

    /* z-index */
    --z-tooltip: 10;
    --z-fixed: 100;

    /* Responsive typography */
    @media screen and (min-width: 1024px) {
        :root {
            --normal-font-size: 1rem;
        }
    }
}

/* BASE */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    /* background-color: var(--body-color); */
    background-color: var(--text-secondary);
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--text-primary);
}

/* REUSABLE CSS CLASSES */

.c-container {
    max-width: 1120px;
    /* margin: 0 auto; */
    margin-inline: 1.5rem;
}

/* HEADER */

.header {
    /* position: fixed; */
    /* top: 0; */
    /* left: 0; */
    width: 100%;
    background-color: var(--text-secondary);
    box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
    z-index: var(--z-fixed);
    height: var(--header-height);
}

/* NAV */

.nav {
    /* height: var(--header-height); */
    height: 100%;
}

.nav__logo,
.nav__burger,
.nav__close {
    color: var(--text-primary);
}

.nav__logo img {
    height: 100px;
}

.nav__data {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__toggle {
    position: relative;
    width: 32px;
    height: 32px;
    /* background-color: gray; */
}

.nav__burger,
.nav__close {
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
}

.nav__close {
    opacity: 0;
}

/* Navigation for mobile devices */

@media screen and (max-width: 920px) {
    .nav__menu {
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100%;
        /* background-color: gray; */
        height: calc(100vh - 3.5rem);
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }
    .nav__menu::-webkit-scrollbar {
        width: 0;
    }
    .nav__list {
        /* background-color: var(--text-secondary); */
        background-color: var(--bg-main);
        color: var(--text-secondary);
        padding-top: 1rem;
    }
}

.nav__link {
    color: var(--text-secondary);
    /* background-color: var(--bg-main); */
    font-weight: var(--font-semi-bold);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color .3s;
}

.nav__link:hover {
    /* background-color: var(--bg-primary); */
    color: var(--bg-octonary);
}

/* Show menu */

.show-menu {
    opacity: 1;
    /* top: 3.5rem; */
    top: var(--header-height);
    pointer-events: initial;
}


/* Show icon */

.show-icon .nav__burger {
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon .nav__close {
    opacity: 1;
    transform: rotate(90deg);
}


/* DROPDOWN */

.dropdown__item {
    cursor: pointer;
}

.dropdown__arrow {
    font-size: 1.25rem;
    font-weight: initial;
    transition: transform .4s;
}

.dropdown__link {
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-semi-bold);
    transition: color .3s;
}

.dropdown__link:hover {
    color: var(--bg-octonary);
}

.dropdown__menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
}

/* Show dropdown menu & submenu */
.dropdown__item:hover .dropdown__menu {
    max-height: 1000px;
    transition: max-height .4s ease-in;
}

/* Rotate dropdown icon */
.dropdown__item:hover .dropdown__arrow {
    transform: rotate(180deg);
}

/* BREAKPOINTS */
/* For small devices */

@media screen and (max-width: 340px) {
    .c-container {
        margin-inline: 1rem;
    }

    .nav__link {
        padding-inline: 1rem;
    }
}

/* For large devices */
@media screen and (min-width: 920px) {
    .c-container {
        margin-inline: auto;
    }

    .nav {
        /* height: calc(var(--header-height) + 2rem); */
        height: 100%;
        display: flex;
        justify-content: space-between;
    }

    .nav__toggle {
        display: none;
    }

    .nav__list {
        height: 100%;
        display: flex;
        column-gap: 3rem;
    }

    .nav__link {
        height: 100%;
        padding: 0;
        justify-content: initial;
        column-gap: .25rem;
        color: var(--text-primary);
    }

    .nav__link:hover {
        background-color: transparent;
    }

    .dropdown__item {
        position: relative;
    }

    .dropdown__menu {
        max-height: initial;
        overflow: initial;
        position: absolute;
        left: 0;
        top: 6rem;
        opacity: 0;
        pointer-events: none;
        width: 180px;
        transition: opacity .3s, top .3s;
    }

    .dropdown__link {
        padding-inline: 1rem 3.5rem;
    }

    /* Show dropdown menu */

    .dropdown__item:hover .dropdown__menu {
        opacity: 1;
        /* top: 5.5rem; */
        /* top: calc(var(--header-height) + 2rem); */
        top: var(--header-height);
        pointer-events: initial;
        transition: top .3s;
    }
    
    /* Show dropdown submenu */

    .donate-nav {
        /* color: #fff; */
        color: var(--text-primary);
        background-color: var(--bg-nonary);
        margin-right: .5rem;
        padding: 10px 12px;
        font-size: 18px;
        font-weight: 500;
        border-radius: 12px;
        display: flex !important;
        align-self: center;
    }

}

#hero-slider {
    position: relative;
    overflow: hidden;
    /* height: 100vh; */
    height: calc(100vh - var(--header-height));
    z-index: -10000;
}

.slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

.slide.active {
    opacity: 1;
}
/* 
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.content-section {
    /* width: 40%; */
    /* height: 60%; */
    width: 90%;
    height: 60%;
    max-height: 500px;
    padding: 20px;
    margin-top: 5%;
    /* margin-left: 5%; */
    background-color: var(--bg-primary);
    /* color: #fff; */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* gap: 10px; */
}

.hero-btn-1,
.hero-btn-2 {
    /* background-color: #000000; */
    border: none;
    border-radius: 20px;
    padding: 12px 14px;
    pointer-events: all;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
}

.hero-btn-1 {
    background-color: var(--text-secondary);
}

.hero-btn-2 {
    background-color: var(--bg-nonary);
}



@media screen and (min-width: 850px) {
    .slide {
        flex-direction: row;
    }
    .content-section {
        margin-left: 5%;
        margin-top: 0;
        width: 40%;
        /* max-height: 300px; */
        height: 70%;
        /* overflow: hidden; */
    }
    
    h1{
        font-size: 30px;
    }
    h2 {
        font-size: 25px;
    }
    h3 {
        font-size: 20px;
        font-weight: 800;
        padding-bottom: 20px;
    }
    h4 {
        font-size: 18px;
    }
}

.caption {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #fff;
}

.column {
    width: 50%;
    padding: 20px;
}


@media screen and (min-width: 768px){
    #card-column {
        margin-bottom: 0;
        margin-right: -10%;
    }
}

@media (max-width: 920px) {
    .slide {
        opacity: 0;
        pointer-events: none; /* Disable pointer events on slides */
    }

    .slide.active {
        opacity: 1;
        pointer-events: auto; /* Enable pointer events on the active slide */
    }
}

#mission-section {
    padding: 50px 20px;
    background-color: #f4f4f4;
    text-align: center;
}

#inner-container {
    max-width: 1200px; /* Adjust the max-width value as needed */
    margin: 0 auto; /* Centered margin */
    padding: 0 20px; /* Adjust the padding value as needed */
    box-sizing: border-box;
}

#mission-section h1 {
    margin-bottom: 20px;
}

#mission-section p {
    margin-bottom: 40px;
}

.stats-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.stats-column {
    flex: 1;
    margin: 0 10px;
    text-align: center;
}

.stats-item {
    margin-block: 20px;
}

#image-row {
    display: flex;
    align-items: center;
    gap: 40px;
    /* align-items: stretch; */
    justify-content: space-between;
}

#image-column {
    flex: 1;
    margin-right: 10px;
}

#text-column {
    flex: 1;
    margin-left: 10px;
}

#text-column h3 {
    margin-bottom: 20px;
}

.arrow-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333;
    margin-bottom: 30px;
}

.arrow-link img {
    margin-right: 10px;
}

@media (max-width: 768px) {
    .stats-section {
        flex-direction: column;
    }

    #image-row {
        flex-direction: column;
    }

    #image-column,
    #text-column {
        flex: 1;
        margin: 0;
    }
}

#new-section {
    background-color: var(--bg-main);
    padding: 50px 0;
    text-align: center;
}

#new-inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#card-column {
    flex: 1;
    background-color: white;
    padding: 20px;
    /* border-radius: 10px; */
    position: relative;
    z-index: 1;
    margin-bottom: -20px; /* Add space between rows on smaller screens */
}

#card-column h3 {
    margin-bottom: 10px;
}

#card-column p {
    margin-bottom: 20px;
}

#learn-more-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: var(--bg-main);
    color: white;
    text-decoration: none;
}

#image-column-new {
    flex: 1;
    margin-left: 20px; /* Adjust as needed */
}

#image-column-new img {
    width: 100%;
    max-width: 600px;
    /* border-radius: 10px; */
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }

    #image-column-new {
        margin-left: 0;
    }
}

/* Next Section Styles */
#next-section {
    text-align: center;
    padding: 50px 0;
}

#next-inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#next-section h1 {
    margin-bottom: 40px;
    padding: 20px; /* Ample padding */
}

.next-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    /* align-items: center; */
    align-items: stretch;
    gap: 20px;
    height: 100%;
    max-height: 500px;
    /* overflow: hidden; */
}

.next-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.next-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.next-text {
    /* background-color: var(--bg-main); */
    background-color: var(--bg-twelfth);
    padding: 20px;
    /* border-radius: 0 0 10px 10px; */
    margin-top: auto;
    position: absolute;
    width: 100%;
    bottom: 0;
}

@media (max-width: 768px) {

    .next-column {
        margin-bottom: 20px;
    }
}

.next-column-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 20px; /* Add space between the rows on smaller screens */
    position: relative;
}

.next-column-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Our Partners Section Styles */
#partners-section {
    background-color: var(--bg-main);
    text-align: center;
    padding: 50px 0;
    color: var(--text-white);
    margin-top: auto;
}

#partners-inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#partners-section h1 {
    margin-bottom: 40px;
}

#logo-slider {
    white-space: nowrap;
    overflow: hidden;
}

/* #logo-slider {
    display: flex;
    overflow: hidden;
    justify-content: space-around;
    align-items: center;
} */
/* 
.logo {
    max-width: 100%;
    max-height: 250px; /* Adjust as needed
    object-fit: contain;
    object-fit: cover;
    margin: 0 20px;
    transition: transform 0.5s ease;
} */
.logo {
    display: inline-block;
    max-width: 100%;
    max-height: 100px; /* Adjust as needed */
    object-fit: contain;
    margin: 0 20px;
    animation: marquee 10s linear infinite;
    vertical-align: middle;
}

.logo img {
    width: 100%;
    height: auto;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
    
}

/* Common */

.section {
    text-align: center;
    padding: 50px 0;
}

/* ABOUT US */

.about-us-section {
    background-color: #fff;
    text-align: center;
    padding: 50px 0;
}

.inner-container {
    max-width: 800px;
    margin: 0 auto;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 30px;
    /* border: 1px solid #ddd; */
    border-radius: 5px;
    /* overflow: hidden; */
}

.left-column {
    flex: 0 0 65%; /* 65% width for left column */
    padding: 20px;
    /* border-right: 1px solid #ddd; */
    border: 1px solid #ddd;
}

.right-column {
    flex: 0 0 35%; /* 35% width for right column */
    padding: 20px;
    border: 1px solid #ddd;
}

.flex-container img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

table {
    width: 100%;
    text-align: left;
}

table td {
    padding: 8px;
}

/* Our History section */
.our-history-section {
    background-color: var(--bg-main);
    color: #fff;
}

.our-history-section .inner-container {
    max-width: 800px;
    margin: 0 auto;
}

.our-history-section img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .about-us-section .flex-container,
    .our-history-section .flex-container {
        flex-direction: column;
    }

    .about-us-section .left-column,
    .about-us-section .right-column,
    .our-history-section .image-container {
        flex: 1;
        /* border-right: none; */
        margin-bottom: 20px;
    }

    .right-column img {
        max-width: 300px;
    }
}

/* New Section */
.new-section {
    background-color: #fff;
}

.new-section .inner-container {
    max-width: 800px;
    margin: 0 auto;
}

.new-section .flex-container {
    display: flex;
    gap: 20px; /* Adjust the gap between columns */
    margin-top: 30px;
    justify-content: space-evenly;
    /* align-items: stretch; */
    align-items: center;
}

.new-section .column {
    flex: 1;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px; /* Add margin between rows on smaller devices */
}

.new-section .column img {
    width: 100%;
    /* height: auto; */
    max-height: 300px;
    object-fit: cover;
    display: block;
    /* border-radius: 5px; */
}

.new-section .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background-color: var(--bg-thirteenth); /* Adjust the background color and transparency */
    color: #fff;
    text-align: center;
}

@media (max-width: 768px) {
    .new-section .flex-container {
        flex-direction: column;
    }

    .new-section .column {
        margin-bottom: 0; /* Remove margin between rows on smaller devices */
    }
}

@media screen and (min-width: 768px) {
    .new-section .flex-container {
        align-items: stretch;
    }
    
}

/* Visit Hero Section */
.visit-hero-section {
    background: url('../images/visit-us-bg.jpg') center/cover no-repeat; /* Replace 'hero-background.jpg' with your actual image URL or path */
    height: calc(100vh - var(--header-height)); /* Viewport height minus navigation bar height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.visit-hero-section h1 {
    font-size: 3em;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.visit-hero-section p {
    font-size: 18px;
    font-weight: 500;
    max-width: 650px;
}

.visit-us-section {
    padding: 50px 0;
    text-align: center;
    position: relative;
}

.visit-us-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

/* Pick your adventure */

.adventure-container {
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-bottom: 20px;
    padding: 10px;
    scroll-behavior: smooth;
}

.adventure-card {
    flex: 0 0 auto;
    margin-right: 10px;
    width: 300px;
    /* border-radius: 10px; */
    overflow: hidden;
    transition: transform 0.3s;
}

.adventure-card:hover {
    transform: scale(1.1);
}

.adventure-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.card-info {
    background-color: var(--bg-main);
    color: var(--text-secondary);
    padding: 10px;
    text-align: center;
    margin-top: -5px;
}

.adventure-card:hover .card-info {
    background-color: var(--bg-link-visit);
}

.card-info a {
    color: #fff;
    text-decoration: none;
    display: block;
    /* margin-top: 5px; */
}

.adventure-card:hover .card-info a {
    color: var(--heading-primary);
}

/* Navigation Arrows */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    color: #333;
    cursor: pointer;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 50%;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}


/* Gorilla Conservation Cafe Section */
.gorilla-cafe-section {
    background-color: #f0f0f0;
    padding: 50px 20px;
    text-align: center;
}

.gorilla-cafe-section .cafe-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.gorilla-cafe-section .cafe-left {
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
}

.gorilla-cafe-section .cafe-right {
    /* width: 48%; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-inline: 20px;
    margin-bottom: 20px;
}

.gorilla-cafe-section .cafe-left img {
    width: 100%;
    /* max-width: 500px; */
    height: auto;
    border-radius: 10px;
}

.gorilla-cafe-section .cafe-left a {
    font-size: 1.2em;
    margin-top: 10px;
    display: block;
    text-decoration: none;
    color: #333;
}

.gorilla-cafe-section .cafe-right h2 {
    font-size: 2em;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.gorilla-cafe-section .cafe-right p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.gorilla-cafe-section .cafe-right a.menu-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-bottom: 3px solid #fff;
    transition: background-color 0.3s;
}

.gorilla-cafe-section .cafe-right a.menu-button:hover {
    background-color: #555;
}
@media (min-width: 920px) {
    .gorilla-cafe-section .cafe-left {
        width: 48%;
    }
    .gorilla-cafe-section .cafe-right {
        width: 48%;
    }

}
@media (max-width: 768px) {
    .gorilla-cafe-section .cafe-container {
        flex-direction: column;
    }

    .gorilla-cafe-section .cafe-right {
        order: -1;
    }
}


/* Get Involved Section */
.get-involved-section {
    /* background-color: #f0f0f0; */
    padding: 50px 0;
}

.get-involved-section .get-involved-inner-container {
    /* max-width: 800px; */
    max-width: 1120px;
    margin: 0 auto;
    padding: 15px;
}

.get-involved-section p {
    font-size: 1.2em;
    margin-bottom: 20px;
    text-align: center;
}

.get-involved-section .get-involved-flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.get-involved-section .get-involved-left-column {
    flex: 0 0 100%;
    margin-bottom: 20px;
}

.get-involved-section .get-involved-left-column img {
    width: 100%;
    max-width: 500px;
    margin: auto;
    height: auto;
    display: block;
    /* border-radius: 5px; */
}

.get-involved-section .get-involved-right-column {
    flex: 0 0 100%;
}

.get-involved-section form {
    background-color: var(--bg-form);
    padding: 20px;
    /* border-radius: 5px; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.get-involved-section form h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.get-involved-section form label {
    display: block;
    margin-bottom: 8px;
}

.get-involved-section form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.get-involved-section form button {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

@media (min-width: 920px) {
    .get-involved-flex-container {
        align-items: stretch;
    }

    .get-involved-section .get-involved-left-column,
    .get-involved-section .get-involved-right-column {
        flex: 0 0 48%; /* 48% width for each column with a small gap in between */
        margin: 1%;
    }
}

/* News & Reports Page */
.news-section {
    padding: 50px 20px;
    text-align: center;
}

.news-heading {
    font-size: 2em;
    margin-bottom: 20px;
}

.tab-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tab {
    padding: 10px 20px;
    background-color: #f0f0f0;
    margin-right: 10px;
    cursor: pointer;
}

.tab.active-1 {
    background-color: #ccc;
}

.search-bar {
    width: 40%;
    padding: 10px;
    margin-bottom: 20px;
}

.content-container {
    display: none;
}

.content-container.active-2 {
    display: block;
}

.grid-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    text-align: left;
    max-width: 800px;
    margin-inline: auto;
}

.grid-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* height: auto; */
    /* border-radius: 10px; */
}

/* CEO MESSAGE PAGE */

.ceo-section {
    background-color: var(--text-secondary);
    padding: 50px 0;
}

.inner-ceo {
    width: 80%;
    /* max-width: 1200px; */
    margin: 0 auto;
}

.inner-ceo h2 {
    color: var(--bg-eleventh);
    text-align: center;
    text-decoration: underline;
    margin-bottom: 30px;
}

.ceo-flex {
    margin-block: 1rem;
}

.ceo-flex img {
    width: 100%;
    object-fit: cover;
    max-height: 300px;
    margin-bottom: 2rem;
}

.ceo-content-1 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: justify;
    background: linear-gradient(236.03deg, rgba(246, 230, 230, 0.64) 29.87%, rgba(246, 230, 230, 0) 91%);
}

.ceo-content-2 {
    display: flex;
    flex-direction: column;
    text-align: justify;
    gap: 2rem;
    background: linear-gradient(119.75deg, #FAF0F0 0.95%, rgba(252, 213, 213, 0) 59.24%);
    margin-bottom: 2rem;
}

@media screen and (min-width: 920px) {
    
    .ceo-flex {
        display: flex;
        /* flex-direction: column; */
        gap: 2rem;
    }

    .ceo-flex img {
        width: 50%;
        max-height: 500px;
    }

    .ceo-content-1,
    .ceo-content-2 {
        /* display: flex; */
        justify-content: center;
        gap: 4rem;
        padding-inline: 1rem;
    }
    .ceo-content-2 {
        margin-bottom: 0;
    }
}

/* COMMUNITY HEALTH PAGE */

.community-section {
    background-color: var(--text-secondary);
    padding: 50px 0;
}

.inner-community {
    width: 80%;
    margin: 0 auto;
}

.inner-community h2 {
    color: var(--bg-eleventh);
    text-align: center;
    text-decoration: underline;
    margin-bottom: 30px;
}

.inner-community p {
    text-align: justify;
}

.community-flex {
    display: flex;
    flex-direction: column;
}

.community-image {
    width: 100%;
    margin-bottom: 2rem;
}

.community-image img {
    width: 100%;
}

@media screen and (min-width: 920px) {
    .community-flex {
        flex-direction: row-reverse;
        align-items: center;
        gap: 2rem;
    }
    .community-image {
        width: 50%;
    }
    .left-community {
        width: 60%;
    }
}

.left-community h3 {
    text-decoration: underline;
    text-align: center;
    margin-bottom: 1rem;
}

/* Bottom Section */
.bottom-section {
    background-color: var(--bg-main);
    color: var(--text-secondary);
    padding: 50px 0;
}

.bottom-community {
    width: 80%;
    margin: 0 auto;
}

.bottom-community h2 {
    text-align: center;
    margin-bottom: 2rem;
    text-decoration: underline;
}

.bottom-community p {
    text-align: justify;
    line-height: 20px;
}

/* WHERE WE WORK PAGE */

.work-at-section {
    background-color: var(--text-secondary);
    padding: 50px 0;
}

.where-inner {
    width: 80%;
    margin: 0 auto;
}

.where-inner h2 {
    text-align: center;
    color: var(--bg-eleventh);
    text-decoration: underline;
    margin-bottom: 12px;
}

.where-flex {
 display: flex;
 flex-direction: column;
 margin-bottom: 10px;
}

.where-flex p,
.where-content p {
    text-align: justify;
}

.where-flex img {
    max-width: 70%;
    margin-inline: auto;
    margin-block: 15px;
    object-fit: cover;
}

@media screen and (min-width: 920px) {
    .where-flex {
        flex-direction: row;
        align-items: center;
        margin: 0;
    }
    .where-flex img {
        width: 50%;
        padding-inline: 3rem;
    }
    .where-flex p,
    .where-content p {
    line-height: 30px;
    }

    .negative-margin {
        margin-top: -1rem;
    }
}

/* ALTERNATIVE LIVELIHOOD PAGE */

.livelihood-section-1,
.livelihood-section-3 {
    background-color: var(--text-secondary);
    padding-block: 10px;
}

.livelihood-section-2,
.livelihood-section-4 {
    background-color: var(--bg-main);
    color: var(--text-secondary);
    padding-block: 10px;
}

.livelihood-inner-1,
.livelihood-inner-2,
.livelihood-inner-3,
.livelihood-inner-4 {
    display: flex;
    flex-direction: column;
}

.livelihood-inner-1 h1,
.livelihood-inner-1 h2,
.livelihood-inner-3 h3 {
    text-align: center;
    color: var(--bg-eleventh);
    text-decoration: underline;
    margin-block: 20px;
}


.livelihood-inner-1 h2 {
    font-size: 18px;
}

.livelihood-inner-1 p,
.livelihood-inner-2 p,
.livelihood-inner-3 p,
.livelihood-inner-4 p {
    text-align: justify;
    padding-inline: 20px;
    padding-bottom: 20px;
}

.livelihood-inner-1 img,
.livelihood-inner-2 img,
.livelihood-inner-3 img,
.livelihood-inner-4 img {
    object-fit: cover;
    max-width: 85%;
    margin: 0 auto;
}

.livelihood-inner-3 img,
.livelihood-inner-4 img {
    width: 60%;
    padding: 20px 0;
}

.livelihood-inner-2 img {
    max-height: 300px;
    margin-top: 20px;
}
.livelihood-inner-2 h3,
.livelihood-inner-4 h3 {
    text-align: center;
    text-decoration: underline;
    margin-block: 20px;
}

.livelihood-flex1,
.livelihood-flex2,
.livelihood-flex3 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 920px) {
    .livelihood-inner-1,
    .livelihood-inner-2,
    .livelihood-inner-3,
    .livelihood-inner-4 {
        max-width: 80%;
        margin: 0 auto;
    }

    .livelihood-inner-2 {
        flex-direction: row;
        align-items: center;
    }
    
    .livelihood-inner-2 img {
        margin-top: 3rem;
        max-height: 250px;
    }
    
    .livelihood-flex1 {
        width: 65%;
    }

    .livelihood-flex2 {
        flex-direction: row;
        padding-block: 20px;
    }
    .livelihood-flex2 img {
        width: 40%;
    }
    
    .livelihood-center-p {
        text-align: center !important;
    }

    .livelihood-flex3 {
        flex-direction: row;
        align-items: center;
        padding-block: 10px 20px;
        max-width: 96%;
        margin: 0 auto;
    }
    .livelihood-flex3 img {
        width: 30%;
    }

    p {
        line-height: 30px;
    }
}


/* CONSERVATION PAGE */
.conservation-section {
    background-color: var(--text-secondary);
    padding: 50px 0;
}

.inner-conservation {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.inner-conservation h3 {
    margin-bottom: 14px;
    text-decoration: underline;
    font-weight: 600;
}

.inner-conservation h2 {
    text-align: center;
    margin: 14px 0;
    color: var(--bg-eleventh);
    text-decoration: underline;
    font-weight: 600;
}

.conservation-hero {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-one-health);
}

.conservation-hero img {
    /* max-width: 80%; */
    max-height: 300px;
    object-fit: cover;
    margin-block: 20px;
}

.conservation-hero div p,
.gorilla-health-content p,
.research-content p {
    text-align: justify;
    line-height: 20px;
    margin-bottom: 20px;
}

.research-content {
    margin-bottom: 20px;
}
.research-content a {
    background-color: var(--btn-bg-wild);
    padding: 10px 15px;
    border-radius: 15px;
    font-weight: 500;
}

.impact-content {
    display: flex;
    flex-direction: column;
}

.impact-content div {
    display: flex;
    flex-direction: column;
    margin-block: 10px;
}

.left-impact span, .right-impact span {
    font-weight: 600;
}

.left-impact p, .right-impact p {
    background-color: var(--bg-form);
    padding: 20px 10px;
    margin-block: 10px;
}

@media screen and (min-width: 920px) {
    .conservation-hero {
        flex-direction: row;
    }
    .conservation-hero div {
        text-align: center;
        width: 50%;
        margin: auto;
    }
    .conservation-hero div p {
        text-align: center;
    }

    .conservation-hero img {
        margin-block: 20px;
        margin-left: 30px;
        max-height: 400px;
        width: 40%;
    }

    .gorilla-health-content,
    .research-content,
    .impact-content {
        padding-inline: 60px;
    }
    
    .gorilla-health-content p,
    .research-content p,
    .impact-content p {
    line-height: 20px;
    }
    .research-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .impact-content div {
        flex-direction: row;
        gap: 20px;
    }
    .left-impact,
    .right-impact {
        display: flex !important;
        flex-direction: column !important;
        width: 50%;
        justify-content: space-between;
    }
    .left-impact p,
    .right-impact p {
        height: 150px;
        text-align: center;
    }
}

/* WHAT WE DO - WORKS PAGE */
.our-work-section {
    background-color: var(--text-secondary);
    padding: 50px 0;
}
.our-work-section h2,
.our-work-section h3,
.our-work-section h4 {
    text-align: center;
    margin: 14px 0;
}

.inner-work {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.inner-work img {
    max-width: 400px;
    margin: 0 auto;
    object-fit: contain;
}

.one-health,
.p-card {
    background-color: var(--bg-one-health);
    padding: 20px;
}

.p-card {
    text-align: center;
    margin-block: 20px;
}
.one-health p {
    text-align: justify;
}

.works-flex {
    display: flex;
    gap: 20px;
    flex-direction: column;
    flex-wrap: wrap;
}
.works-flex a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    background-color: var(--bg-form);
    padding-block: 20px;
    font-weight: 600;
}
.works-flex a img {
    width: 50px;
    object-fit: contain;
}

.last-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-one-health);
    padding-block: 20px;
    /* margin: 0 auto; */
}
.last-card div {
    display: flex;
    flex-direction: column;
    padding: 30px;
    align-items: flex-start;
    gap: 10px;
    line-height: 20px;
}
.last-card div a {
    background-color: var(--bg-form);
    padding: 5px 10px;
    font-weight: 500;
}

.last-card img {
    max-width: 90%;
    object-fit: contain;
}

@media screen and (min-width: 920px) {
    .one-health {
        display: flex;
        gap: 30px;
    }
    .one-health h4 {
        width: 50%;
    }
    .our-work-section h2,
    .our-work-section h3,
    .our-work-section h4 {
    /* text-align: center; */
    margin: 30px 0;
    }
    .works-flex {
        flex-direction: row;
        justify-content: space-between;
        margin-inline: 2%;
    }
    .works-flex a {
        padding-inline: 30px;
    }

    .last-card {
        flex-direction: row;
    }
    .last-card div {
        align-items: center;
        gap: 40px;
    }

    .last-card div a {
        padding: 10px 20px;
        font-weight: 700;
    }

    .last-card img {
        max-width: 400px;
    }
}

/* MEET THE TEAM PAGE */

.team-section {
    background-color: var(--text-secondary);
    padding: 50px 0;
}

.inner-team {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.inner-team h2,
.inner-team h3 {
    text-align: center;
    margin: 14px 0;
}
.inner-team > img {
    width: 65%;
    margin: auto;
}
.inner-team .centered-p {
    text-align: center;
    margin-bottom: 20px;
}

.team-flex-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* .team-flex-2 {
    display: flex;
    flex-direction: column;
} */
.team-flex-2,
.team-flex-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    max-width: 250px;
}
.team-flex-2 span,
.team-flex-3 span {
    text-align: center;
    font-weight: 500;
}
.team-flex-2 img,
.team-flex-3 img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}
.team-grid-1 {
    /* display: grid; */
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 920px) {
    .inner-team > img {
        max-width: 60%;
        margin: 0 auto;
    }
    .team-grid-1 {
        flex-direction: row;
        gap: 30px;
        margin-block: 40px;
    }
}

/* QUESTIONNAIRE AND REGISTRATION */

/* QUESTIONNAIRE */

.questionnaire-outer {
    background-color: var(--text-secondary);
    padding: 10px 0;
}

.questionnaire-inner {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.questionnaire-header {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-questionnaire);
    /* flex-direction: column; */
}
.questionnaire-header img {
    max-width: 20%;
    object-fit: cover;
}
.questionnaire-header h1 {
    font-size: 15px;
}
.questionnaire-header p {
    font-size: 12px;
    margin-top: 5px;
}

.questionnaire-body {
    margin-block: 20px;
    display: flex;
    flex-direction: column;
}

.questionnaire-body h3,
.questionnaire-body h2 {
    text-align: center;
    padding-block: 20px;
}

.questionnaire-body p {
    text-align: justify;
    padding-bottom: 20px;
}

.questionnaire-body form {
    padding-block: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.questionnaire-body form label {
    font-weight: 500;
}

.questionnaire-body form textarea {
    padding: 20px;
    height: 100px;
    outline: none;
    border: 1px solid #dddddd;
}

.questionnaire-body form input[type="submit"] {
    cursor: pointer;
}

.questionnaire-body form input,
.questionnaire-body form select {
    outline: none;
    border: none;
    border-bottom: 1px solid #b4b4b4;
    padding-block: 10px;
}
.questionnaire-body form ul {
    margin-bottom: 20px;
}
.questionnaire-body form ul li {
    list-style-type: disc;
    text-align: justify;
    padding-left: 10px;
    margin-left: 10px;
}
.questionnaire-body form table {
    border-collapse: collapse;
}
.questionnaire-body form table th{
    font-size: 10px;
}

.questionnaire-body form table th,
.questionnaire-body form table td {
    border: 1px solid #dddddd;
    padding: 8px;
    text-align: center;
}

@media screen and (min-width: 650px) {
    .questionnaire-header h1 {
        font-size: 18px;
    }
    .questionnaire-header p {
        font-size: 15px;
    }
    .questionnaire-header img {
        max-width: 18%;
    }


}

@media screen and (min-width: 920px) {
    .questionnaire-inner {
        width: 70%;
    }
    .questionnaire-header {
        width: 90%;
        margin: auto;
    }

    .questionnaire-header img {
        max-width: 15%;
    }
}

/* SITE MAP */

.sitemap-section {
    padding: 50px 0;
    background-color: var(--text-secondary);
}

.sitemap-inner {
    width: 80%;
    margin: 0 auto;
}

.sitemap-inner ul li {
    padding: 5px 0;
    font-weight: 600;
}

.sitemap-inner ul li a {
    transition: all 0.3s ease;
}

.sitemap-inner ul li:hover a {
    background-color: var(--bg-octonary);
}
.sitemap-inner ul > ul {
    margin-left: 20px;
}

.not-done {
    opacity: 0.5;
}