@media screen and (max-width: 800px) {
    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        color: #0A0903;
    }
    
    body {
        font-family: "Work Sans", serif;
        background-color: #C4A381;
        margin: 0 0;
        overflow-x: hidden;
        padding: 0;
        width: 100vw;
    }
    
    .container {
        width: 100vw;
        height: auto;
    }

    .header {
        position: fixed;
        width: 100vw;
        height: 18vw;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }
    
    .donate {
        height: 90%;
        display: block;
        width: 30%;
        text-align: center;
        background-color: rgba(51, 101, 138, 0.1);
        backdrop-filter: blur(5px);
        align-content: center;
        border-radius: 3vw;
        cursor: pointer;
        margin-right: 1vw;
        font-size: 5vw;
    }

    .lang {
        width: 20vw;
        display: block;
        height: 20vw;
        text-align: center;
        align-content: center;
        img {
            width: 50%;
            height: 50%;
            object-fit: cover;
        }
    }

    .hero, .goals {
        width: 100%;
        height: 216vw;
        position: relative;
        display: block;
        text-align: center;
        align-content: center;
    }
    
    .hero-text {
        width: 100vw;
        height: 65vw;
        display: inline-block;
        text-align: center;
        align-content: center;
        margin: 0;
        h1 {
            font-size: 12vw;
            font-weight: 700;
        }
        p {
            font-size: 4vw;
            font-weight: 400;
            width: 80%;
        } 
    }
    
    .hero-images {
        width: 100%;
        height: 108vw;
        margin: 0;
        position: relative;
        display: grid;
        grid-template-areas: 
            "img1"
            "img2"
            "img3";
        justify-items: center;
        align-items: center;
        .img1 {
            width: 45%;
            aspect-ratio: 50/60;
            top: 0%;
            left: 22%;
            grid-area: img1;
            z-index: 10;
        }
        .img2 {
            width: 41%;
            aspect-ratio: 28/20;
            top: 10%;
            left: 17%;
            grid-area: img2;
            z-index: 12;
        }
        .img3 {
            width: 35%;
            aspect-ratio: 30/40;
            grid-area: img3;
            top: -170%;
            left: 53%;
            z-index: 11;
        }
        .img1, .img2, .img3 {
            position: absolute;
            overflow: hidden;
            border-radius: 3vw;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    
    .hero-bits{
        position: absolute;
        width: 50%;
        height: 100%;
        right: 0;
        .hero-bits-container{
            width: 100%;
            height: 100%;
            position: relative;
            display: grid;
            grid-template-areas: 
                "star"
                "pill"
                "square";
            justify-items: center;
            align-items: center;
            .star , .pill , .square {
                position: absolute;
            }
            .star {
                width: 13vw;
                height: 13vw;
                grid-area: star;
                top: -68%;
                left: 30%;
                transition: transform 0.1s linear;
                z-index: 20;
                img {
                    width: 80%;
                    height: 80%;
                    object-fit: cover;
                }
            }
            .pill {
                width: 10vw;
                height: 10vw;
                top: -165%;
                left: -70%;
                grid-area: pill;
                z-index: 20;
                overflow: hidden;
                text-align: center;
                align-content: center;
                .pill-child {
                    width: 3vw;
                    height: 9vw;
                    transform: rotate(-45deg);
                    background-color: #33658A;
                    margin: 0 auto;
                    border-radius: 3vw;
                }
            }
            .square {
                width: 10vw;
                height: 10vw;
                border-radius: 3vw;
                top: -350%;
                left: 40%;
                grid-area: square;
                z-index: 20;
                .square-child {
                    width: 9vw;
                    height: 9vw;
                    background-color: #33658A;
                    margin: 0 auto;
                    border-radius: 3vw;
                    transform: rotate(45deg);
                }
            }
        }
    }
    
    #goals-pc{
        display: none;
    }

    #goals-text-mobile {
        width: 90%;
        margin: 0 5%;
        display: inline-block;
        justify-content: center;
        align-items: center;
        text-align: left;
        h1 {
            font-size: 12vw;
            font-weight: 700;
        }
        p {
            font-size: 4vw;
            font-weight: 400;
        }
    }
    
    #goals-image-mobile {
        width: 90vw; 
        display: inline-block;
        align-content: center;
        height: 40vw;
        margin: 0 auto;
        .img {
            width: 100%;
            height: 70%;
            border-radius: 3vw;
            overflow: hidden;
            margin: 0 auto;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .end-screen {
        width: 100vw;
        position: relative;
        height: 216vw;
        text-align: center;
        align-content: center;
        .donate-link{
            width: 100%;
            text-align: center;
            align-content: center;
            margin: 0 auto;
            a {
                width: 100%;
                height: 100%;
                margin: 0 auto;
            }
        }
    
        h1 {
            font-size: 15vw;
            font-weight: 700;
            z-index: 15;
            transition: 0.2s; 
            position: relative;
            color: beige;
        }
    
        .donate-link:hover h1{
            font-weight: 900;
        }
    
        .contact {
            position: absolute;
            font-size: 4vw;
            right: 0;
            bottom: 0;
            margin: 1vw 1vw;
            text-align: right;
            a {
                transition: 0.5s;
            }
        }
    
        .contact a:hover {
            padding-right: 10px;
        }
    }
    
    .end-images {
        width: 100%;
        height: 100%;
        margin: 0;
        position: absolute;
        display: grid;
        grid-template-areas: 
            "img1"
            "img2"
            "img3";
        justify-items: center;
        align-items: center;
        .img1 {
            width: 55%;
            aspect-ratio: 50/60;
            top: 70%;
            left: 30%;
            grid-area: img1;
            z-index: 10;
        }
        .img2 {
            width: 50%;
            aspect-ratio: 28/20;
            top: 40%;
            left: 45%;
            grid-area: img2;
            z-index: 12;
        }
        .img3 {
            width: 45%;
            aspect-ratio: 30/40;
            grid-area: img3;
            top: -65%;
            left: 10%;
            z-index: 11;
        }
        .img1, .img2, .img3 {
            position: absolute;
            overflow: hidden;
            border-radius: 3vw;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    
    .donate-link:hover .end-images > .img1 {
        top: 60%;
        left: 35%;
    }
    
    .donate-link:hover .end-images > .img2 {
        top: 47.5%;
        left: 47.5%;
    }
    
    .donate-link:hover .end-images > .img3 {
        top: -60%;
        left: 5%;
    }
    
    .show {
        opacity: 0;
        transform: translate(0, 20%);
        filter: blur(5px);
        transition: all 1s ease-in-out;
    }
    
    .hidden {
        opacity: 1;
        filter: blur(0px);
        transform: translate(0, 0);
        transition: all 1s ease-in-out;
    }

    .donate-card {
        width: 80%;
        height: 60%;
    }

    .exit-donate {
        width: 12vw;
        height: 12vw;
        margin: 1vw;
    }
}