:root {
    --main-background-color: #1A181B;
    --main-text-color: #F8F7F9;
    --cta-color: #FF5964;
    --main-accent: #016FB9;
    --secondary-accent: #22AED1;
    --gray-highlight: #242225;
    --x-large-text: 64px;
    --large-text: 32px;
    --regular-text: 18px;
    --small-text: 15px;
    --x-small-text: 12px;
    --primary-font: 'Helvetica', 'Arial', sans-serif;;
}

.central-content {
    max-width: 855px;
    width: 95vw;
    margin-left: auto;
    margin-right: auto;
    padding-right: 2.5vw;
    padding-left: 2.5vw;
}


body {
    margin: 0;
    background-color: var(--main-background-color);
    color: var(--main-text-color);
    font-family: var(--primary-font);
}



h1 {
    font-family: var(--primary-font);
    font-size: var(--x-large-text);
    color: var(--main-text-color);
}

h2 {
    font-family: var(--primary-font);
    font-size: var(--large-text);
    color: var(--main-text-color);
    font-weight: normal;
}

h3 {
    font-family: var(--primary-font);
    font-size: var(--regular-text);
    color: var(--main-text-color);
    font-weight: normal;
}

p {
    font-size: var(--small-text);
}

.nav-bar {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: var(--regular-text);
    font-family: var(--primary-font);
    color: var(--main-text-color);
    height: 116px;
    align-items: center;
}

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

.hero {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 64px;
    margin-top: 35px;
}

.hero-image {
    position: relative;
    border-radius: 17px;
}

.hero-image::before {
    content: '';
    position: absolute;
    top: -5px; /* Adjust the position to fit your design */
    right: -5px;
    bottom: -5px;
    left: -5px;
    background-image: linear-gradient(180deg, #5B98A8 0%, #3D423B 100%);
    filter: blur(12px); /* Adjust the blur radius as needed */
    z-index: -1;
}

.hero-image img {
    width: 100%;
    transform: scaleX(-1);
    border-radius: 17px;
}





.hero-content {
    width: 40%;
}

.hero-content h2{
    margin-bottom: 17px;
}

.hero-content h3{
    margin-bottom: 46px;
}
.hero-image {
    width: 54%;
}

.header-text {
    position: relative;
    display: inline-block;

}



.header-text::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px; /* Adjust thickness as needed */
    bottom: -5px; /* Adjust distance from text as needed */
    left: 0;
    background: linear-gradient(to right, var(--main-accent), var(--secondary-accent)); /* Replace with your gradient colors */
  }

.cta-button {
    position: relative;
    font-weight: bold;
    background-color: var(--cta-color);
    padding: 10px;
    border-radius: 17px;
    width: fit-content;
}

.cta-button::before {
    content: "";
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    z-index: -1;
    position: absolute;
    top: 5px;
    right: 0px;
    background-color: var(--main-accent);
    padding: 10px;
    border-radius: 17px;
    transform: translateY(-5px); /* Starts 5px below its standard position */
    transition: transform 0.1s ease-in-out;
}

.cta-button:hover::before {
    transform: translateY(0); /* Moves the pseudo-element back to its standard position on hover */
}

/* styles.css */
#loading-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#app {
    display: none; /* Hide the app initially */
}

.cards {
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 83px;
}

.info-small {
    font-size: 32px;
    font-weight: normal;
}
.card {
    width: 23%;
    height: 270px;
    border-radius: 17px;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: -5px; /* Adjust the position to fit your design */
    right: -5px;
    bottom: -5px;
    left: -5px;
    background-image: linear-gradient(224deg, #128FC5 0%, #FF5964 100%);
    filter: blur(12px); /* Adjust the blur radius as needed */
    z-index: -1;
}

#first::before {
    background-image: linear-gradient(224deg, #128FC5 0%, #FF5964 100%);
}
#second::before {
    background-image: linear-gradient(180deg, #22AED1 0%, #C0A442 100%);
}
#third::before {
    background-image: linear-gradient(-85deg, #EC4384 0%, #22AED1 100%);

}

.blur-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    border-radius: 17px;
}

.blur-image::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3); /* Adjust the last value for darkness level */
    z-index: 1; /* Above the image but below the content */
}
  
.blur-image img {
    width: 100%;
    height: 100%;
    filter: blur(9px); /* Adjust as necessary */
    object-fit: cover; /* This will ensure the image covers the area without stretching */
}
  
.card .content {
    filter: blur();
    position: relative;
    color: var(--main-text-color); /* Assuming you want white text */
    padding: 10px; /* Match the padding of the blur-background to align the content */
    z-index: 2;
    text-align: center;
    padding-top: 5px;
}

.card .content .cta-button {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;

}

.card .content .cta-button::before {
    background-color: var(--secondary-accent);
}

.card-center {
    width: 44%;
    
}

.card-center p {
    margin-top: 28px;
}

.updates {
    width: 100%;
}


.updates h2 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
    margin-bottom: 45px;
}

.updates .header-text::after {
    background-image: linear-gradient(270deg, #FF5964 0%, #FFD100 100%);
}

.split {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 80px;
}

.split div {
    width: 46%;

}

.instagram-widget {
    display: flex;
    justify-content: center;
    height: 427px;
    align-items: center;
    background-color: #242E35;
    border-radius: 17px;
}

.unit {
    color: var(--cta-color);

}

.percent {
    color: var(--main-accent);
}

.currency {
    color: #A353F3;
}





.timeline h2 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
    margin-bottom: 45px;
}

.timeline .header-text::after {
    background-image: linear-gradient(270deg, #FF5964 0%, #FFD100 100%);
}

.timeline-container {
    display: flex;
    height: 254px;

    margin-bottom: 82px;
}

.timeline-container .year-selector {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}

.splitter {
    content: "";
    height: 100%;
    width: 10px;
    background-color: var(--main-text-color);
    margin-left: 12.5px;
    margin-right: 12.5px;
}

.timeline-container .year-content {
    display: flex;
    position: relative;
}

.timeline-container .year-content .arrow {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
}

.timeline-container .year-content .arrow.glow svg {
    filter: url(#blur-filter);
    position: absolute;
    z-index: 1; /* Ensure the glow is behind the original arrow */
    /* Add your glow color */
    fill: var(--cta-color); /* Replace with your desired glow color */
    /* Position the glow offset as needed */
    transform: translateY(10px); /* Adjust as needed */
    overflow: visible;
}


.timeline-container .year-content .arrow svg{
    margin-left: 0px;
    margin-right: 30px;
    z-index: 2;
    position: relative;
}

.timeline-container .year-content .content * {
    width: 85%;
}


/* What We Do Section */

.what-we-do h2 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
    margin-bottom: 45px;
}

.what-we-do .header-text::after {
    background-image: linear-gradient(270deg, #C422D1 0%, #016FB9 100%);
}

.what-we-do h3 {
    text-align: center;
}

.what-we-do img {
    box-shadow: 0px 5px 5px 0 rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.3s ease-in-out;
}





.what-we-do .gallery {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 393px;
    position: relative;
}
.what-we-do .key-image {
    width: 54%;
    position: relative;
}


.what-we-do .key-image img {
    height: 100%;
    border-radius: 17px;

}
.what-we-do .gallery .split-image {
    width: 41%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.what-we-do .gallery .split-image img{
    width: 100%;
    border-radius: 17px;

}


.what-we-do .image-hover-effect {
    position: relative;
    display: inline-block; /* Or block, depending on your layout */
    border-radius: 17px; /* If you want the hover effect to have rounded corners */
    width: 100%;
}

.what-we-do .key-image .image-hover-effect {
    position: relative;
    display: inline-block; /* Or block, depending on your layout */
    border-radius: 17px; /* If you want the hover effect to have rounded corners */
    height: 100%;
}

.what-we-do .image-hover-effect::before {
    content: '';
    position: absolute;
    top: 2px; /* Increase the spread of the blur */
    right: 2px;
    bottom: -8px;
    border-radius: 17px;
    left: 2px;
    background-image: linear-gradient(269deg, #F90100 0%, #FC7D01 30%, #F9FA0A 70%, #04F7BA 100%);
    filter: blur(3px); /* Adjust the blur radius as needed */
    z-index: -1; /* Ensures the gradient is behind the image */
    transition: opacity 0.3s ease-in-out; /* Fade effect for the pseudo-element */
    opacity: 0; /* Start with a transparent pseudo-element */
}

.what-we-do .image-hover-effect:hover::before {
    opacity: 1;
}

.what-we-do .image-hover-effect img {
    display: block; /* Removes any inline spacing */
    height: 100%;
    width: 100%;
    border-radius: 17px;
}

.what-we-do  img:hover {
    box-shadow: none;
}

.blur-background {
    position: fixed; 
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.2); 
    backdrop-filter: blur(10px); 
    z-index: 3; 
}

@keyframes blurIn {
    0% {
        opacity: 0;
        /* filter: blur(10px); */
    }
    100% {
        opacity: 1;
        /* filter: blur(0); */
    }
}

@keyframes blurOut {
    0% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 0;
        filter: blur(10px);
    }
}

.donate-content {
    position: fixed; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 4; 
   

   
    border-radius: 8px; 
    width: 934px;
    height: 588px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    animation: blurIn 0.1s forwards;
    
}

.close-button {
    position: absolute;
    top: -30px;
    right: -30px;
    /* background-color: #fff; */
    /* border: 2px solid #000; */
    color: white;
    font-size: 30px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.info {
    height: 100%;
    width: 48%;
    background-color: var(--gray-highlight);
    border-radius: 17px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    overflow: hidden;
}

.info img {
    height: 50%;
    width: 100%;
}

.info h3, h2 {

    padding-right: 10px;
}

.info h2 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.container-for-splitter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 49%;
}

.container-for-splitter .splitter {
    width: 3px;
    height: 90%;
    background: rgb(34,150,209);
    background: linear-gradient(180deg, rgba(34,150,209,1) 0%, rgba(255,209,0,1) 100%);
    margin-right: 6px; /* space between splitter and text */
}

.container-for-splitter .not-splitter {
    flex: 1;
}

.payment-box {
    height: 100%;
    width: 48%;
    background-color: var(--gray-highlight);
    border-radius: 17px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 

}

.selection-buttons {
    margin-top: 0px;
    width: 100%;
    height: 51px;
    display: flex;
    
}

.selection-buttons div{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selection-buttons .unclicked{
    background-color: #312E32;
    border-top-right-radius: 17px;
}

.selection-buttons .unclickedleft{
    background-color: #312E32;
    border-top-left-radius: 17px;
}

.amount-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding: 20px;
    border-radius: 10px;
    justify-content: center;
}
.amount-box div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    
    color: white;
    border: 1px solid #979797;
    
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}
.amount-box div:hover {
    background-color: #555;
    border-color: #979797;
}
.amount-box div.selected {
    background-color: var(--main-accent);
    border-color: #979797;
}
.amount-box div p {
    margin: 0;
    font-size: 18px;
}

.selectCustom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.selectCustom input{
    background-color: transparent;
    border: 0px 0px 0px 0px transparent;
    border-bottom-color: var(--main-accent);
    border-bottom-width: 2px;
    color: var(--main-text-color);
    text-align: center;
    font-size: var(--regular-text);
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
}
.coverage-q {
    
    font-size: var(--x-small-text);
    display: flex;
    justify-content: center;
}

.amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
    margin-top: 25px;
}

.amount.selected {
    margin-top: 0px;
    margin-bottom: 18px;
}

.amount h3 {
    margin-bottom: 2px;
}
.amount h2 {
    margin-top: 8px;
}

.payment-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pay-with-card, .pay-with-other {
    width: 90%;
    height: 37px;
    border-radius: 17px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.payment-buttons p {
    font-size: var(--regular-text);
    color: white;
    margin: 0;
}

.pay-with-card {
    background-color: var(--cta-color);
    box-shadow: 0px 4px 0px 0px var(--main-accent);
}

.pay-with-other {
    background-color: var(--secondary-accent);
    box-shadow: 0px 4px 0px 0px #703F99;
    visibility: hidden;
    
}

.pay-with-card:hover {
    background-color: #FF7F87;
    box-shadow: 0px 4px 0px 0px var(--main-accent);
}

.pay-with-other:hover {
    background-color: #6CBCD0;
    box-shadow: 0px 4px 0px 0px #703F99;
    
}

.footer {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    background-color: rgb(66, 61, 67);
    z-index: 9999;
    text-align: center;
}

.mobileview {
    display: none;
}




@media only screen and (max-width: 760px)  {
    
    .hero {
        flex-direction: column-reverse;

    }

    .hero-content {
        width: 100%;
    }

    .hero-image {
        width: 100%;
    }
    .cards {
        display: flex;
        flex-wrap: wrap; /* Allow the cards to wrap onto the next line */
        justify-content: space-between; /* This will space out the first row cards */
        gap: 20px; /* Adjust the gap as needed */
    }
    
    .card {
        flex: 1 1 calc(50% - 10px); /* Set the basis for flex items; adjust the calculation to account for the gap */
        margin-bottom: 20px; /* Add some space between the rows */
        /* The rest of your .card styles... */
    }
    
    .card-center {
        flex-basis: 100%; /* Make the middle card take full width of the flex container to drop it to a new row */
        width: 100%; /* Ensure it spans the full width */
        order: 3;
        /* The rest of your .card-center styles... */
    }

    .updates .split {
        flex-direction: column;
     
    }

    .updates .split div {
        flex-direction: column;
        width: 100%;
     
       
        
    }

    .updates .split .big-numbers {
        text-align: center;
    }
/* 
    .timeline .year-content {
        flex-direction: column;
        
    }
    .timeline-container {
        margin-bottom: 50px;
        height: fit-content;
    }

    .timeline-container .year-content {
        width: 70%;

    }
    
    .splitter {
        width: 10px;
        height: 100%;
    } */

    .timeline-container{
        height: fit-content;
    }

    .timeline-container .year-content {
        flex-direction: column; /* Stack the content vertically */
        width: 100%; /* Allow content to take full width */
        height: auto;
    }

    

    .timeline-container .year-content .arrow {
        justify-content: center; /* Center arrows horizontally */
    }

    .timeline-container {
        height: auto;
    }

    .splitter {


        width: 3px;
        height: auto;
    }


    .timeline-container .year-content .arrow svg {
        transform: rotate(90deg); /* Rotate arrows to point right */
    }

    .timeline-container .year-content .arrow.glow svg {
        transform: rotate(90deg); /* Rotate glow arrows to point right */
        display: none;
    }

    .timeline-container .year-content .content {
        width: 100%; /* Content should take the full width */
        /* Adjust padding and margin as needed */
    }

    .timeline-container .year-selector {
        height: auto;
    }

    #twitter-widget-0 {
        width: 100% !important;
    }

    .instagram-widget {
        height: fit-content;
        padding: 0px;
        background-color: transparent;
        margin-top: 0px;
    }

    .split {
        margin-top: 20px;
    }

    .mobileview {
       display: inline;
    }

    .mobilehide {
        display: none;
    }
    
   
}

@media only screen and (max-width: 900px) {
    
    .donate-content {
        all: initial; /* Reset all previous styles */
        z-index: 6;
        width: 90%;
    }

    .payment-box {
        width: 100%;
        color: var(--main-text-color);
        font-family: var(--primary-font);
    }

    .info {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    
    .info img {
        width: 100%;
        height: 50%;
        object-fit: cover;
    }

    .close-button {
        position: absolute;
        top: 15px;
        right: 20px;
    }
    .blur-background {
        all: initial; /* Reset all previous styles */
    }

    .hideall {
        display: none;
    }

    .what-we-do .gallery .key-image {
        width: 70%;
    }

    .what-we-do .gallery .key-image .image-hover-effect {
        height: auto;

    }

    .what-we-do .gallery .key-image .image-hover-effect img{
        height: auto;

    }

    .what-we-do .gallery .split-image {
        width: 29%;
        justify-content: flex-start;
    }

    .what-we-do .gallery .split-image .image-hover-effect {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 650px)  {

    .card {
        height: 300px;
    }
    .gallery {
        flex-direction: column;
    }

    .what-we-do .key-image {
        width: 100% !important;
        height: auto;
    }
    .what-we-do .key-image .image-hover-effect {
        width: 100% !important;
        height: auto;

        margin-bottom: 20px;
    }

    .what-we-do .gallery .split-image{
        width: 100%;
    }


    .what-we-do .gallery .split-image {
        width: 100%;
        margin-bottom: 20px;
    }

    .what-we-do .gallery .split-image .image-hover-effect {
        margin-bottom: 20px;
    }


    .timeline-container .year-content .content * {
        width: 100%;
    }

    .image-hover-effect {
        width: 100%;
    }
}

@media only screen and (max-width: 374px)  {
    .card {
        height: 300px;
    }
}