@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");

body {
    font-family: "Outfit", sans-serif;
    background-color: #f8f8f8;
    scroll-behavior: smooth;
}

.vcn-logo {
    width: 20%;
}

.description-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.description-clamp {
    overflow: hidden;
    /* Hide the overflow content */
    display: -webkit-box;
    /* Display as a WebKit box (required for line clamping) */
    -webkit-line-clamp: 5;
    /* Show only 2 lines of text */
    -webkit-box-orient: vertical;
    /* Orient the box vertically */
    text-overflow: ellipsis;
    /* Add the ellipsis (...) when text is truncated */
}

.video-container {
    position: relative;
    /* Container for the video */
    width: 100%;
    /* Full width of the container */
    height: auto;
    /* Full viewport height */
    overflow: hidden;
    /* Hide any overflow */
}

video {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    /* Makes the video responsive */
    height: auto;
    /* Keeps the aspect ratio */
}

.font-outfit {
    font-family: "Outfit", sans-serif;
}

.font-sora {
    font-family: "Sora", sans-serif;
}

.text-red {
    color: #dc143c;
}

.text-vcn-blue {
    color: #003893 !important;
}

.border-vcn-blue {
    border: 1px solid #003893 !important;
}

.w-35 {
    width: 35%;
}

.banner-heading {
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    z-index: 9;
    /* top: 50%; */
}

.banner-img {
    position: absolute;
}

.banner-text {
    font-size: 1rem;
    z-index: 9;
    /* top: 50%; */
    /* color: #ffffff; */
}

.btn-donate {
    padding: 5px 20px;
    color: #ffffff;
    font-size: 13px;
    border-radius: 0;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #dc143c;
    transition: all 0.2s ease-in-out;
    box-shadow: 0px 4px 4px #00000025;
}

.btn-donate:hover {
    color: #ffffff;
    background-color: #f50031;
}

.btn-donate:active {
    background-color: #ba1133;
    color: #ffffff;
}

.font-xxs {
    font-size: 0.5rem;
}

.font-smaller {
    font-size: 0.7rem;
}

.font-xs {
    font-size: 0.8rem;
}

.font-sm {
    font-size: 1.5rem;
}

.font-md {
    font-size: 1.9rem;
}

.font-lg {
    font-size: 2.5rem;
}

.font-10 {
    font-size: 10px;
}

.font-11 {
    font-size: 11px;
}

.font-12 {
    font-size: 12px;
}

.font-13 {
    font-size: 13px;
}

.font-14 {
    font-size: 14px;
}

.font-15 {
    font-size: 15px;
}

.font-16 {
    font-size: 16px;
}

.font-17 {
    font-size: 17px;
}

.font-18 {
    font-size: 18px;
}

.font-19 {
    font-size: 19px;
}

.font-20 {
    font-size: 20px;
}

.font-21 {
    font-size: 21px;
}

.font-22 {
    font-size: 22px;
}

.font-23 {
    font-size: 23px;
}

.font-24 {
    font-size: 24px;
}

.font-25 {
    font-size: 25px;
}

.font-26 {
    font-size: 26px;
}

.font-27 {
    font-size: 27px;
}

.btn-dark-blue {
    background-color: #003893;
    color: #ffffff;
    padding: 10px 24px;
    font-family: "Sora", sans-serif;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0px 4px 4px #00000025;
    border: none;
}

.btn-dark-blue:hover {
    background-color: #0057e5;
    color: #ffffff;
}

.btn-dark-blue:active {
    background-color: #002561;
    color: #ffffff;
}

.btn-dark-blue:disabled {
    background-color: #a9a9a9;
    color: #919598;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.65;
}

.color-vcn-red {
    color: rgba(220, 20, 60, 0.75);
    transition: all 0.3s ease-in-out;
}

.fs-7 {
    font-size: 0.8rem;
}

/*
.right- {
    transform: rotate(90deg);
    font-size: 8rem;
} */

/* .color-vcn-red:hover {
    color: #dc143c;
} */

.btn-newsletter {
    background-color: #f4f4f4;
    padding: 8px 25px;
    text-decoration: none;
    font-size: 14px;
    color: #5c5b58;
    font-family: "Outfit", sans-serif;
    transition: all 0.3s ease-in-out;
    border: 2px solid #5c5b58;
}

.text-lt-dark {
    color: #5c5b58 !important;
}

.text-justify {
    text-align: justify !important;
}

.obj-contain {
    object-fit: contain !important;
}

.btn-newsletter:hover {
    background-color: #ececec;
    color: #757171;
}

.footer-link {
    color: #1c1b18;
    text-decoration: none;
}

.line {
    height: 6px;
    width: 60px;
    background-color: #dc143c;
    z-index: 999;
}

.text-lt-blue {
    color: #1496dc;
}

.border-vcn {
    border: 1.5px solid #003893;
}

.table-bordered,
th,
td {
    border: 1.5px solid #003893 !important;
    color: #003893;
}

.table-sm > :not(caption) > * > * {
    padding: 0.1rem 0.4rem !important;
}

.bg-lt-blue {
    background-color: #1496dc;
}

.bg-ash-blue {
    background-color: #dfeff9;
}

.border-bottom-grey {
    border-bottom: 0.5px solid #25242057;
}

.border-right-grey {
    border-right: 0.5px solid #25242057;
}

.border-top-grey {
    border-top: 0.5px solid #25242057;
}

.border--grey {
    border-left: 0.5px solid #25242057;
}

.btn-vcn-red {
    padding: 5px 15px;
    color: #ffffff;
    font-size: 13px;
    border-radius: 0;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #dc143c;
    transition: all 0.2s ease-in-out;
    box-shadow: 0px 4px 4px #00000025;
    border: none;
}

.btn-vcn-red:hover {
    color: #ffffff;
    background-color: #f50031;
}

.btn-vcn-red:active {
    background-color: #ba1133;
    color: #ffffff;
}

.bg-grey {
    background-color: #e9e9e9;
}

.text-grey {
    color: #e9e9e9;
}

.rounded-5 {
    border-radius: 10px;
}

.w-20 {
    width: 20%;
}

.text-blue {
    color: #1496dc;
}

.text-dred {
    color: #a8193a;
}

.text-green {
    color: #10ad15;
}

.custom-col {
    padding: 15px;
    display: flex;
    justify-content: center;
}

.obj-cover {
    object-fit: cover;
}

.color-dark-blue {
    color: #003893;
}

/* .image-container {
    background-image: url("../img/banner/banner1.png");
    background-size: cover;
    height: auto;
} */

.border-cyan {
    border: 1.5px solid #45a2c9;
}

.text-cyan {
    color: #45a2c9;
}

.fs-9 {
    font-size: 0.6rem;
}

.fs-8 {
    font-size: 0.7rem;
}

.w-70 {
    width: 65%;
}

.darchula {
    padding: 1px 15px;
    background-color: #2fdad0;
}

.sindhupalchowk {
    padding: 1px 15px;
    background-color: #c830e1;
}

.ktm {
    padding: 1px 15px;
    background-color: #dc143c;
}

.bajhang {
    padding: 1px 15px;
    background-color: #fcf8a9;
}

.parsa {
    padding: 1px 15px;
    background-color: #1a7a47;
}

.bkt {
    padding: 1px 15px;
    background-color: #003893;
}

.bajura {
    padding: 1px 15px;
    background-color: #d7397b;
}

.bara {
    padding: 1px 15px;
    background-color: #d3eef4;
}

.lalitpur {
    padding: 1px 15px;
    background-color: #fecc02;
}

.mugu {
    padding: 1px 15px;
    background-color: #75ec96;
}

.sarlahi {
    padding: 1px 15px;
    background-color: #7f4489;
}

.kavre {
    padding: 1px 15px;
    background-color: #10ad15;
}

.achham {
    padding: 1px 15px;
    background-color: #30d7b9;
}

.dhanusha {
    padding: 1px 15px;
    background-color: #653333;
}

.jajarkot {
    padding: 1px 15px;
    background-color: #e47c1c;
}

.doti {
    padding: 1px 15px;
    background-color: #101f46;
}

.siraha {
    padding: 1px 15px;
    background-color: #444f89;
}

.rukum-west {
    padding: 1px 15px;
    background-color: #cab8e0;
}

.kailali {
    padding: 1px 15px;
    background-color: #5f5555;
}

.saptari {
    padding: 1px 15px;
    background-color: #ede530;
}

.mustang {
    padding: 1px 15px;
    background-color: #eed19a;
}

.surkhet {
    padding: 1px 15px;
    background-color: #3176dc;
}

.solu {
    padding: 1px 15px;
    background-color: #a78e5f;
}

.syangja {
    padding: 1px 15px;
    background-color: #a5d442;
}

.bardiya {
    padding: 1px 15px;
    background-color: #c6a398;
}

.khotang {
    padding: 1px 15px;
    background-color: #358199;
}

.rupandehi {
    padding: 1px 15px;
    background-color: #782df2;
}

.banke {
    padding: 1px 15px;
    background-color: #69b7ff;
}

.dhankuta {
    padding: 1px 15px;
    background-color: #51eded;
}

.chitwan {
    padding: 1px 15px;
    background-color: #f3879d;
}

.dailekh {
    padding: 1px 15px;
    background-color: #a83636;
}

.taplejung {
    padding: 1px 15px;
    background-color: #fc3f3f;
}

.udaypur {
    padding: 1px 15px;
    background-color: #c1d9e4;
}

.rautahat {
    padding: 1px 15px;
    background-color: #f3ccda;
}

.mahottari {
    padding: 1px 15px;
    background-color: #edb186;
}

/* Hamburger */
.menu-btn {
    display: flex;
    position: relative;
    z-index: 9999 !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 13px;
    width: 40px;
    height: 40px;
}

.menu-btn__burger {
    width: 35px;
    height: 2px;
    background-color: #003893;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
}

.menu-btn__burger::before,
.menu-btn__burger::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    left: 10px;
    background-color: #003893;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.menu-btn__burger::before {
    top: -10px;
}

.menu-btn__burger::after {
    top: 10px;
}

.menu-btn.open .menu-btn__burger {
    transform: rotate(45deg);
    background-color: #2a2a2a;
}

.menu-btn.open .menu-btn__burger::before {
    transform: rotate(-90deg);
    top: 0;
    left: 1px;
    background-color: #2a2a2a;
}

.menu-btn.open .menu-btn__burger::after {
    transform: rotate(-90deg);
    top: 0;
    left: 1px;
    background-color: #2a2a2a;
}

.menu-btn1 {
    display: flex;
    position: relative;
    z-index: 9999 !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 13px;
    width: 40px;
    height: 40px;
}

.menu-btn__burger1 {
    width: 35px;
    height: 2px;
    background-color: #003893;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
}

.menu-btn__burger1::before,
.menu-btn__burger1::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    left: 10px;
    background-color: #003893;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.menu-btn__burger1::before {
    top: -10px;
}

.menu-btn__burger1::after {
    top: 10px;
}

.menu-btn1.open .menu-btn__burger1 {
    transform: rotate(45deg);
    background-color: #003893;
}

.menu-btn1.open .menu-btn__burger1::before {
    transform: rotate(-90deg);
    top: 0;
    left: 1px;
    background-color: #003893;
}

.menu-btn1.open .menu-btn__burger1::after {
    transform: rotate(-90deg);
    top: 0;
    left: 1px;
    background-color: #003893;
}

.nav1 {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: end;
    transition: all 0.3s ease;
    z-index: 999;
}

.nav1.open {
    left: 0;
}

.nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: start;
}

.nav__item {
    margin: 30px 0;
    font-weight: 700;
    font-size: 15px;
}

.nav__item1 {
    margin: 30px 0;
    font-weight: 700;
    font-size: 1px;
}

.nav__item a {
    color: #25242075;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease-in-out;
    font-family: "Sora", sans-serif;
}

.nav__item1 a {
    color: #25242075;
    text-decoration: none;
    font-size: 12px;
    margin: 30px 0px !important;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
    font-family: "Sora", sans-serif;
}

.nav__item a:hover {
    color: #000000;
}

.nav__item1 a:hover {
    color: #000000;
}

.footer-border-top {
    border-top: 1px solid #2524204d;
}

/* Add this to your CSS file */

.sticky-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000 !important;
    background-color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: all 0.5s ease-in-out;

    .btn-donate {
        padding: 5px 20px;
        color: #ffffff;
        font-size: 14px;
        border-radius: 0;
        font-weight: 800;
        text-transform: uppercase;
        background-color: #dc143c;
        transition: all 0.2s ease-in-out;
        box-shadow: 0px 4px 4px #00000025;
    }

    .btn-donate:hover {
        color: #ffffff;
        background-color: #f50031;
    }

    .btn-donate:active {
        background-color: #ba1133;
        color: #ffffff;
    }

    /* Hamburger */

    .menu-btn {
        display: flex;
        position: relative;
        z-index: 99;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        margin: 12px;
        width: 40px;
        height: 40px;
    }

    .menu-btn__burger {
        width: 35px;
        height: 2px;
        background-color: #003893;
        border-radius: 10px;
        transition: all 0.3s ease;
        position: relative;
    }

    .menu-btn__burger::before,
    .menu-btn__burger::after {
        content: "";
        position: absolute;
        width: 35px;
        height: 2px;
        left: 10px;
        background-color: #003893;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    .menu-btn__burger::before {
        top: -10px;
    }

    .menu-btn__burger::after {
        top: 10px;
    }

    .menu-btn.open .menu-btn__burger {
        transform: rotate(45deg);
        background-color: #003893;
    }

    .menu-btn.open .menu-btn__burger::before {
        transform: rotate(-90deg);
        top: 0;
        left: 1px;
        background-color: #003893;
    }

    .menu-btn.open .menu-btn__burger::after {
        transform: rotate(-90deg);
        top: 0;
        left: 1px;
        background-color: #003893;
    }

    .lang {
        color: #2a2a2a !important;
    }
}

/* Add transition for smooth effect */
.navbar-collapse {
    transition: top 0.3s;
}

/* Primary Navigation */

/* Secondary Navigation */
.nav2 {
    border-left: 1px solid #2524204d;
    position: fixed;
    top: 0;
    padding-top: 2rem;
    left: 250px;
    width: 250px;
    justify-content: center !important;
    align-items: center !important;
    padding: 3rem 1rem;
    height: 100%;
    z-index: -1;
    background-color: #ffffff;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    display: none;
}

.nav2.hidden {
    display: none;
    /* Hide the primary nav */
}

/* Show secondary nav when active */
.nav2.active {
    transform: translateX(0);
    left: 250px;
    display: block;
    transition: all 0.3s ease-in-out;
}

.nav3 {
    border-left: 1px solid #2524204d;
    position: fixed;
    top: 0;
    padding-top: 2rem;
    left: 249px;
    width: 250px;
    justify-content: center !important;
    align-items: center !important;
    padding: 3rem 1rem;
    height: 100%;
    z-index: -1;
    background-color: #ffffff;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    display: none;
}

.nav3.hidden {
    display: none;
    /* Hide the primary nav */
}

/* Show secondary nav when active */
.nav3.active {
    transform: translateX(0);
    left: 249px;
    display: block;
    transition: all 0.3s ease-in-out;
}

/* Auto sliding swiper */
.swiper-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}


.z-99 {
    z-index: 9999 !important;
}

@keyframes scroll-left {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}


/* .swiper-wrapper {
    display: flex;
} */

/* .swiper-slide {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: auto;
    transition: transform 0.3s ease;
    overflow: hidden;
} */

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60%;
}

/* 7 grid columns */
.column-seven {
    flex: 0 0 10%;
    /* 100% / 7 = 14.2857% */
    max-width: 10%;
    box-sizing: border-box;
    padding: 8px;
    /* Adjust padding as needed */
}

.fill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 95px !important;
    height: 95px !important;
}

.input-field {
    background-color: transparent;
    border: 0;
}

.input-field:focus {
    outline: none;
    /* Removes the default focus outline */
    border: none;
    /* Ensures no border is shown */
}

.gallery-img-ht {
    height: 250px;
    object-fit: cover;
}

.menu-btn__burger1 {
    width: 35px;
    height: 2px;
    background-color: #003893;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 999;
}

.menu-btn__burger1::before,
.menu-btn__burger1::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    left: 10px;
    background-color: #003893;
    border-radius: 10px;
    transition: all 0.3s ease;
    z-index: 999;
}

.menu-btn__burger1::before {
    top: -10px;
    z-index: 999;
}

.menu-btn__burger1::after {
    top: 10px;
    z-index: 999;
}

.menu-btn.open .menu-btn__burger1 {
    transform: rotate(45deg);
    background-color: #003893;
    z-index: 999;
}

.menu-btn.open .menu-btn__burger1::before {
    transform: rotate(-90deg);
    top: 0;
    left: 1px;
    background-color: #003893;
    z-index: 999;
}

.menu-btn.open .menu-btn__burger1::after {
    transform: rotate(-90deg);
    top: 0;
    left: 1px;
    background-color: #003893;
    z-index: 999;
}

.lang1 {
    color: #2a2a2a;
}

.btn-donate1 {
    border: 3px solid #dc143c;
    padding: 5px 20px;
    color: #252525;
    font-size: 0.7rem;
    border-radius: 0;
    transition: all 0.3s ease-in-out;
}

.btn-donate1:hover {
    color: #212121;
    border-color: #bf1134;
}

.video-sec-video-ht {
    height: 400px;
    object-fit: cover;
}

.text-align {
    text-align: justify;
}

.border-outline {
    box-shadow: 0px 4px 4px #00000025 !important;
}

.btn-read {
    padding: 5px 40px;
    border: none;
    color: #ffffff;
    font-size: 14px;
    border-radius: 0;
    background-color: #003893;
    transition: all 0.3s ease-in-out;
}

.btn-read:hover {
    color: #ffffff;
    background-color: #033586;
}

.btn-clear {
    padding: 10px 30px;
    border: none;
    color: #ffffff;
    font-size: 0.7rem;
    border-radius: 0;
    font-weight: bold;
}

.digital-profile-container {
    background-image: url("../img/gallery/reportImg/Paint\ Brush\ 2.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.profile-container {
    background-image: url("../img/gallery/reportImg/Kosi-returns-to-its-old-ways-NT-6\ 1.png");
    background-size: cover;
    height: 400px;
    width: 400px;
}

.btn-donate-red {
    border: 3px solid #dc143c;
    padding: 5px 20px;
    background-color: #dc143c;
    color: white;
    font-size: 0.7rem;
    border-radius: 0;
    transition: all 0.3s ease-in-out;
}

.leadership {
    background-image: url("../img/gallery/leadership-img/leadership.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.bg-stroke1 {
    background-image: url("../img/gallery/leadership-img/Brush\ Stroke.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.bg-stroke2 {
    background-image: url("../img/gallery/leadership-img/Brush\ Stroke\ \(1\).png");
    background-size: cover;
    height: 100vh;
    background-repeat: no-repeat;
}

.initiative-img {
    background-image: url("../img/gallery/initiatives-img/Header\ Image.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.bg-stroke3 {
    background-image: url("../img/graphics/graphic2.png");
    background-repeat: no-repeat;
    height: 300px;
    background-size: cover;
}

.btn-arrow {
    color: #1496dc !important;
    background-color: transparent;
    border: 1px solid #1496dc;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.btn-arrow:hover {
    background-color: #1496dc;
    color: #ffffff !important;
    border: transparent;
}

btn-arrow.disabled,
.btn-arrow.disabled:hover {
    /* No hover effect on disabled */
    color: #919598 !important;
    background-color: transparent;
    border: 1px solid #919598;
    cursor: not-allowed;
    border-radius: 5px;
    /* Change cursor to indicate it's not clickable */
    pointer-events: none;
    /* Disable any pointer events */
}

.text-vcn-grey {
    color: #e7eaeb;
}

.text-vcn-grey:hover {
    background-color: #f50031;
}

.bg-volunteer-program {
    background-image: url("../img/gallery/volunteer/Group\ 41.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.stroke3 {
    background-image: url("../img/gallery/volunteer/Grunge\ 2.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-dev-project {
    background-image: url("../img/gallery/devProject/proDev.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.bg-dev-stroke {
    background-image: url("../img/gallery/devProject/bgstroke.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-emergency-service {
    background-image: url("../img/gallery/emergency-img/bgEmergency.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.projects {
    color: #000;
}

.projects:hover {
    color: #003893;
}

/* timeline */
#timeline-container {
    width: 100%;
}

#timeline-content {
    position: relative;
}

.timeline-item {
    display: none;
    padding: 20px;
    background-color: #dfeff9;
    border: transparent;
    margin-bottom: 10px;
}

.timeline-item.active {
    display: block;
}

#progress-bar-container {
    position: relative;
    height: 10px;
    background-color: #ddd;
    margin: 20px 0;
}

#progress-bar {
    height: 100%;
    width: 0;
    background-color: #1496dc;
}

#date-label {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.timeline-btn {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 10px 35px; */
    border: none;
    border-radius: 5px;
    background-color: transparent;
    color: #1496dc;
    border: 1px solid #1496dc;
    cursor: pointer;
    font-size: 20px !important;
    transition: all 0.3s ease-in-out;
}

.timeline-btn:hover {
    background-color: #1496dc;
    color: #ffffff !important;
}

.timeline-btn:disabled {
    border: 1px solid #919598;
    color: #919598;
    background-color: transparent;
    cursor: not-allowed;
}

.font-6rem {
    font-size: 6rem;
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: 2px solid #899398;
    cursor: pointer;
    position: relative;
}

.custom-checkbox:checked {
    border-color: #f50031;
}

.custom-checkbox:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background-color: #f50031;
    border-radius: 50%;
    accent-color: #f50031;
}

.less-and-great-btn {
    background-color: gray;
}

.less-and-great-btn:hover {
    background-color: #dc143c;
}

.videoLink iframe {
    width: 100% !important;
    /* height: auto; */
}

.videoLink1 iframe {
    width: 100% !important;
    height: 200px !important;
}

#bucket {
    padding: 20px;
    position: relative;
    width: 300px;
    /* Set a fixed width for the bucket */
    height: 300px;
    /* Set a fixed height for the bucket */
    overflow: auto;
    /* Allow scrolling if content overflows */
    /* Optional: background color for better visibility */
    display: flex;
    /* Use flexbox to arrange images */
    flex-wrap: wrap;
    /* Allow images to wrap to the next line */
    align-items: center;
    /* Center items vertically */
    justify-content: center;
    /* Center items horizontally */
}

#bucket-content {
    display: flex;
    flex-wrap: wrap;
    /* Allow images to wrap */
    justify-content: center;
    /* Center images horizontally */
    align-items: center;
    /* Center images vertically */
    width: 80%;
    height: 80%;
}

#bucket-content img {
    width: 20%;
    /* Adjust width to ensure all images fit */
    height: auto;
    /* Maintain aspect ratio */
    max-width: 40px;
    /* Set a maximum width */
    max-height: 40px;
    /* Set a maximum height */
    margin: 5px;
    /* Add some space around images */
    box-sizing: border-box;
    /* Include padding and border in element's total width and height */
}

.border-right-black10 {
    border-right: 1px solid #e4e8eb;
}

.lh-2 {
    line-height: 2;
}

.lh-15 {
    line-height: 1.5;
}

/* .btn-donate {
    padding: 12px 24px;
    color: #ffffff;
    font-size: 14px;
    border-radius: 0;
    background-color: #DC143C;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 2px 8px #cacaca;
}

.btn-donate:hover {
    color: #ffffff;
    background-color: #F50031;
}

.btn-donate:active {
    background-color: #BA1133;
    color: #ffffff;
} */

.read-more-button {
    position: relative;
    display: inline-block;
    /* Hide overflow */
}

.chevron-icon {
    display: inline-block;
    /* Ensure the icon behaves like a block */
    transition: transform 0.3s ease;
    color: #dc143c;
    /* Smooth transition for movement */
    transform: translateX(0);
    font-size: 1rem;
    font-weight: 900;
    /* Increase the font size for better visibility */
    /* Start position */
}

.read-more-button:hover .chevron-icon {
    transform: translateX(20px);
    /* Move the icon to the right on hover */
}

.read-more-button i {
    font-weight: 900 !important;
    /* Ensure the icon is bold */
    transition: font-weight 0.3s ease;
    /* Smooth transition for weight change */
}

.read-more-button {
    position: relative;
    display: inline-block;
}

.chevron-icon {
    display: inline-block;
    /* Ensure the icon behaves like a block */
    transition: transform 0.3s ease;
    /* Smooth transition for movement */
    /* Space between text and icon */
}

/* responsive nav */

.mobile-menu {
    display: none;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: -100%;
    width: 90%;
    height: 100%;
    transition: left 0.3s ease;
    z-index: 99999;
}

.mobile-menu ul {
    list-style-type: none;
    padding: 5px 20px;
}

.ul-padding {
    padding: 10px 15px;
}

.ul-padding li {
    padding: 10px 15px;
}

.mobile-menu ul li a {
    color: #25242075;

    text-decoration: none;
    display: block;
}

.mobile-menu {
    height: 100vh;
    overflow-y: auto;
    background-color: #ffffff;
}

.sub-menu,
.submenu {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
    background-color: #ffffff;
    box-shadow: 0px 2px 8px #cacaca;
}

.sub-menu.open,
.submenu.open {
    height: auto;
}

.submenu {
    padding-left: 20px;
}

.submenu li {
    padding: 0px;
}

.submenu li a {
    color: #25242075;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
    font-weight: 400;
}

.submenu li a:hover {
    color: #000;
}

.mobile-menu ul {
    list-style-type: none;
    padding: 0;
}

.mobile-menu ul li {
    position: relative;
    padding: 10px 15px;
    border-bottom: 1px solid #25242075;
}

.mobile-menu ul li a {
    color: #25242075;
    text-decoration: none;
    display: block;
    font-weight: bold;
}

.mobile-menu ul li a:hover {
    color: #000;
    text-decoration: none;
    display: block;
}

.mobile-menu.show {
    left: 0;
}

.submenu {
    height: 0;
    max-height: auto;
    overflow: scroll;
    transition: height 0.3s ease-out;
    background-color: #ffffff;
    padding-left: 20px;
}

.submenu.open {
    height: auto;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .mobile-menu {
        display: block;
    }
}

.sub-menu.open {
    display: block;
}

.text-vcn-lt-blue {
    color: #1496dc;
}

.bi-arrow-right {
    font-size: 20px;
    line-height: 0;
}

.btn-secondary {
    padding: 5px 15px !important;
    border-radius: 0px !important;
    box-shadow: 0px 4px 4px #00000025 !important;
    border: none !important;
    font-size: 13px !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.timeline-img {
    width: 100%;
    height: 400px;
    object-fit: contain;
}

#navigation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    padding: 0 20px;
    margin-top: 20px;
}