:root {
    --grey-BG: #E3E5FF;
    --brand: #76B2FD;
    --brand-2: #147AFD;
    --linear-3: linear-gradient(264.05deg, #0070FD 6.72%, #53B883 49.79%, #D8C256 94.57%);
    --text-blue: #02131C;
    --blue-1: #222729;
    --blue-2: #1F1E7E;
    --blue-3: #04697C;
    --blue-5: #ACCEF9;
    --blue-shadow: #00D7FF;
    --green-1: #008550;
    --green-3: #0BF49A;
    --green-4: #A3FDC2;
    --green-5: #099430;
    --green-shadow: #00FF48;
    --green-shadow-2: #00E47D;
    --yellow-1: #856300;
    --yellow-3: #F7DC6F;
    --yellow-4: #F7DC6F;
    --yellow-5: #F6E9BA;
    --yellow-6: #EDD77F;
    --yellow-7: #B48C14;
    --yellow-shadow: #E3AA00;
    --purple: #E3ABED;
    --purple-2: #FED3F5;
    --orange: #964B00;
    --deep-black: #09090A;
    --grey-1: #D3D3D3;
    --grey-2: #959595;
    --grey-3: #455A64;
    --grey-4: #29292B;
    --grey-5: #222729;
    --slate: #F7F7F7;

}

body {
    font-family: "Inter", Helvetica;
}

a {
    text-decoration: none;
    color: black;

}

a:hover {
    text-decoration: none;
}

.cursor-pointer {
    cursor: pointer;
}

button {
    padding: 0;
}

input:focus {
    outline: none;
}



.text-black {
    color: var(--text-blue);
}


/* shadow */
.blue-shadow {
    box-shadow: 8px 8px 0px 0px var(--blue-shadow);
}

.yellow-shadow {
    box-shadow: 8px 8px 0px 0px var(--yellow-shadow);
}

.green-shadow {
    box-shadow: 8px 8px 0px 0px var(--green-shadow);
}

.green-shadow-2 {
    box-shadow: 8px 8px 0px 0px var(--green-shadow-2);
}

/* blue */
.bg-blue-1 {
    background-color: var(--blue-1);
}

.border-blue-1 {
    border-color: var(--blue-1);
}

.text-blue-1 {
    color: var(--blue-1);
}

.fill-blue-1 {
    fill: var(--blue-1);
}

.bg-blue-2 {
    background-color: var(--blue-2);
}

.bg-blue-3 {
    background-color: var(--blue-3);
}

.border-blue-3 {
    border-color: var(--blue-3);
}

.text-blue-3 {
    color: var(--blue-3);
}

.bg-blue-5 {
    background-color: var(--blue-5);
}

.text-blue-2 {
    color: var(--blue-2);
}

.border-blue-5 {
    border-color: var(--blue-5);
}

.text-blue-5 {
    color: var(--blue-5);
}

.bg-brand {
    background-color: var(--brand);
}

.bg-brand-2 {
    background-color: var(--brand-2);
}

.bg-brand-2:hover {
    background-color: blue;
}

.text-brand-2 {
    color: var(--brand-2);
}

.fill-brand-2 {
    fill: var(--brand-2);
}

.border-brand-2 {
    border-color: var(--brand-2);
}


/* green */
.bg-green-1 {
    background-color: var(--green-1);
}

.border-green-1 {
    border-color: var(--green-1);
}

.text-green-1 {
    color: var(--green-1);
}

.fill-green-1 {
    fill: var(--green-1);
}

.bg-green-3 {
    background-color: var(--green-3);
}

.border-green-3 {
    border-color: var(--green-3);
}

.text-green-3 {
    color: var(--green-3);
}

.bg-green-4 {
    background-color: var(--green-4);
}

.border-green-4 {
    border-color: var(--green-4);
}

.text-green-4 {
    color: var(--green-4);
}

.bg-green-5 {
    background-color: var(--green-5);
}

.border-green-5 {
    border-color: var(--green-5);
}

.text-green-5 {
    color: var(--green-5);
}

/* yellow */
.bg-yellow-1 {
    background-color: var(--yellow-1);
}

.border-yellow-1 {
    border-color: var(--yellow-1);
}

.text-yellow-1 {
    color: var(--yellow-1);
}


.bg-yellow-3 {
    background-color: var(--yellow-3);
}

.text-yellow-3 {
    color: var(--yellow-3);
}

.text-orange {
    color: var(--orange);
}

.fill-yellow-3 {
    fill: var(--yellow-3);
}

.fill-green-4 {
    fill: var(--green-4);
}

.fill-blue-5 {
    fill: var(--blue-5);
}

.bg-yellow-4 {
    background-color: var(--yellow-4);
}

.border-yellow-4 {
    border-color: var(--yellow-4);
}

.text-yellow-4 {
    color: var(--yellow-4);
}

.bg-yellow-5 {
    background-color: var(--yellow-5);
}

.border-yellow-5 {
    border-color: var(--yellow-5);
}

.text-yellow-5 {
    color: var(--yellow-5);
}

.bg-yellow-6 {
    background-color: var(--yellow-6);
}

.border-yellow-6 {
    border-color: var(--yellow-6);
}

.text-yellow-6 {
    color: var(--yellow-6);
}

.bg-yellow-7 {
    background-color: var(--yellow-7);
}

.border-yellow-7 {
    border-color: var(--yellow-7);
}

.text-yellow-7 {
    color: var(--yellow-7);
}


/* grey */
.bg-grey {
    background: var(--grey-BG);
}

.text-grey-1 {
    color: var(--grey-1);
}

.text-grey-4 {
    color: var(--grey-4);
}

.text-grey-3 {
    color: var(--grey-3);
}

.text-grey-5 {
    color: var(--grey-5);
}

.fill-purple-2 {
    fill: var(--purple-2)
}

.bg-slate {
    background: var(--slate);
}

.bg-purple {
    background-color: var(--purple);
}

.bg-purple-2 {

    background-color: var(--purple-2);
}

.bg-orange {
    background: var(--orange);
}

.border-orange {
    border-color: var(--orange);
}

.border-bottom-grey-2 {
    border-bottom: 1px solid var(--grey-2);
}

/* utils */

.top-nav {
    z-index: 1000;
    box-shadow: 0px 1px 3px 1px #00000026;
    box-shadow: 0px 1px 2px 0px #0000004D;

}

.card-img-top {
    width: 24px;
}

.tabs-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.sticky-tabs {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    top: 4.4em;
    z-index: 99;
}

.sticky-tab {
    position: -webkit-sticky;
    position: sticky;
    top: 4.4em;
}

.nav-tab {
    width: Hug (152px)px;
    height: Hug (40px)px;
    padding: 8px 16px 8px 16px;
    gap: 10px;
    border: 2px solid black;
    border-radius: 24px;
    text-align: center;
    transition: 0.3s ease;
    /* Smooth transition */
}

.nav-tab.active {
    background-color: white;
    /* Background color for the active tab */
    color: black;
    /* Optional: Change text color for better contrast */
    border: none;

}

.faq-question {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-align: left;

}

.content-card {
    width: 400px;
    padding: 24px 0px 0px 0px;
    gap: 24px;
    border-radius: 12px 0px 0px 0px;
    opacity: 0px;
    line-height: 28px;
    letter-spacing: 0.25px;
}



.form-checkbox-wrapper {
    position: relative;
    width: 20px;
    /* Width of the custom checkbox */
    height: 20px;
    /* Height of the custom checkbox */
}

.form-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-checkbox {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    /* Optional: rounded corners */
    border: 2px solid #ccc;
    /* Default border color */
    position: relative;
    cursor: pointer;
    background-color: white;
}

.form-checkbox:checked+.custom-checkbox {
    background-color: inherit;
    /* Use the dynamic background color */
}

.custom-checkbox::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    /* Create the checkmark shape */
    transform: rotate(45deg);
    opacity: 0;
    /* Hide checkmark initially */
}

.form-checkbox:checked+.custom-checkbox::after {
    opacity: 1;
    /* Show checkmark when checked */
}

.active-tab {
    border-bottom: 1px solid var(--grey-2);
}

.our-mission-border {
    border-top: 1px solid var(--grey-2);
}