@media only screen and (max-width: 699px){
    body{
        overflow-x: hidden;
    }
    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 10000;
        background-color: rgba(0, 0, 0, 0.35);
        color: #fff;
        transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms;
    }
    .headerOnScroll{
        background-color: #fff !important;
        color: #012169 !important;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
    .site-head{
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    .site-head h1{
        font-size: 18px;
        color: #fff;
    }
    .site-head p{
        font-size: 12px;
        color: #fff;
    }
    .headerOnScroll .site-head h1, .headerOnScroll .site-head p, .headerOnScroll .site-actions ul li{
        color: #012169 !important;
    }
    .site-head img {
        width: 40px;
        height: 45px;
    }
    .site-actions{
        display: flex;
        flex-direction: row;
        gap: 40px;
    }
    .site-actions ul{
        display: none;
        flex-direction: row;
        gap: 15px;
    }
    .site-actions ul #text{
        display: none;
    }
    .site-actions ul li{
        list-style: none;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        color: #fff;
    }
    .site-actions #donation{
        padding: 8px 13px;
        border-radius: 8px;
        border: none;
        background-color: #1877F2;
        color: #fff;
    }
    #banner{
        height: 450px;
        position: relative;
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }
    .banner-overlay{
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0px 20px;
        justify-content: flex-end;
        background: rgba(0, 0, 0, 0.3);
        padding-bottom: 50px;
    }
    .banner-overlay h1{
        width: 400px;
        font-size: 36px;
        color: #fff;
        text-shadow:  2px 2px 5px #000;
    }
    .banner-overlay p{
        max-width: 300px;
        font-size: 15px;
        color: #f1f1f1;
        text-shadow:  2px 2px 5px #000;
    }
    #enroll{
        background-color: #1877F2;
        padding: 16px 60px;
        margin-top: 40px;
        border: none;
        border-radius: 10px;
        width: fit-content;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
    
    }
    .icon-menu{
        position: absolute;
        right: 0;
        bottom: -120px;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0px;
        z-index: 1000;
    }
    .icon-menu .inner-box{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        background-color: #fff;
        box-shadow: none;
        border-radius: 80px;
        width: -webkit-fill-available;
        height: fit-content;
    }
    .icon-item{
        font-size: 15px;
        color: #012169;
        font-weight: 800;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    .icon-item img{
        width: 40px;
        height: 40px;
    }
    
    .blockContents{
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        margin-top: 50px;
        margin-bottom: 50px;
        align-items: center;
    }
    .firstBlock{
        margin-top: 100px;
    }
    
    .underline-decoration{
        width: -webkit-fill-available;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .blockContents span {
        position: static;
        color: #af282c;
        text-align: center;
        font-size: 40px;
        width: 70%;
    }
    .blockContents .underline-decoration::after {
        content: "";
        display: block;
        width: -webkit-fill-available;
        height: 11.8px;
        background: url("./assets/underline-decoration.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .blockContents h4{
        color: #012169;
        width: 80%;
        margin-top: 20px;
        font-size: 16px;
        text-align: center;
    }
    
    /*Image Buttons*/
    .image-button{
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-inline: 25px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .imageButton{
       width: 350px;
       height: 340px;
       margin: 10px;
       background-color: #000;
       border-radius: 20px;
       position: relative;
       overflow: hidden;
    }
    .buttonOverlay{
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 0px;
        width: 100%;
        bottom: 0px;
        border-radius: inherit;
        align-items: center;
        justify-content: flex-end;
        color: #fff !important;
        padding: 30px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .buttonOverlay h3{
        color: #fff;
    }
    .buttonIcon{
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }
    .buttonBackground{
        width: 100%;
        height: inherit;
        border-radius: inherit;
    }
    .values{
        background-color: #F4F4F4;
        width: -webkit-fill-available;
        height: fit-content;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 25px;
        position: relative;
    }
    .values .label{
        position: absolute;
        top: 40px;
        width: 100%;
        text-align: center;
    }
    .values .floatIcon1 {
        width: 150px;
        height: 150px;
        position: absolute;
        top: 20px;
        left: 30px;
    }
    .values .floatIcon2 {
        width: 150px;
        height: 150px;
        position: absolute;
        bottom: 20px;
        right: 30px;
    }
    .values .valueItem img{
        width: 100px;
        height: 100px;
    }
    .values .valueItem{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 100px;
        gap: 10px;
        width: 60%;
    }
    .whoWeAre{
        padding-inline: 0px;
        margin-top: 0px;
        background-color: #f1f1f1;
        padding-bottom: 20px;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .articleBox{
        display: flex;
        flex-direction: column;
        gap: 50px;
        margin-bottom: 60px;
        align-items: center;
    }
    .mobileMiddle{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
    }
    .articleTexts{
        text-align: center;
        width: 80%;
    }
    .articleBox img{
        width: 100%;
        height: 100%;
        border-radius: 0;
        padding-inline: -25;
    }
    .articleBox h2{
        font-size: 30px;
        margin-top: -30px;
    }
    .articleBox p{
        font-size: 20px;
        width: 100%;
        margin-top: 10px;
    }

        /*Footer*/
    .footer{
        background-color: #f4f4f4;
        padding: 25px;
    }
    .footerLogo{
        width: 50px;
        height: 50px;
    }
    .footerIconBrand{
        width: 30px;
        height: 30px;
    }
    .aboveFooter{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1.5px;
        margin-bottom: 25px;
        padding-bottom: 12px;
        gap: 20px;
    }
    .accredit{
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .sitLogo{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footerMenuBox{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 30px;
    }
    .aboutSummary{
        width: -webkit-fill-available;
    }
    .aboutSummary h2{
        font-size: 18px;
        margin-bottom: 20px;
    }
    .aboutSummary p{
        font-size: 12px;
        margin-bottom: 20px;
    }
    .aboutSummary ul li{
        list-style: none;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 5px;
    }
    .aboutSummary input{
        padding: 12px;
        width: 100%;
        color: inherit;
        border: none;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    .aboutSummary button{
        display: flex;
        width: 100%;
        padding: 14px;
        background-color: goldenrod;
        border: none;
        border-radius: 40px;
        align-self: flex-end;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 600;
    }
    .desktop{
        display: none !important;
    }
    .mobile-menu{
        display: flex !important;
        gap: 5px;
        cursor: pointer;
    }
    .mobile-menu img{
        display: none;
        width: 30px;
        height: 30px;
        align-items: center;
    }
    .menuShow{
        display: flex !important;
    }
    .mobile-menu p{
        color:#fff;
    }
    .headerOnScroll .mobile-menu p{
        color: inherit;
    }
    .mobile{
        display: flex;
    }
    #mobileMenu{
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10000;
    }
    .mobileMenuContainer{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .menuSlide{
        position: absolute;
        top: 10px;
        right: -100%;
        width: 70%;
        bottom: 10px;
        border-radius: 5px;
        background-color: #fff;
        padding: 25px;
        -webkit-animation: slide 0.5s forwards;
        -webkit-animation-delay: 0.1s;
        animation: slide 0.5s forwards;
        animation-delay: 0.1s;
    }
    
    @-webkit-keyframes slide {
        100% { right: 10px; }
    }
    
    @keyframes slide {
        100% { right: 10px; }
    }
    .menuSlide #closeMenu{
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }
    .menuSlide #closeMenu p {
        font-weight: 500 !important;
        height: fit-content;
    }
    .menuSlide #closeMenu img{
        width: 30px;
        height: 30px;
    }
    .menuSlide h2{
        margin-top: 40px;
    }
    .menuSlide ul{
        list-style: none;
        line-height: 2em;
        font-size: 16px;
        font-weight: 700;
        margin-top: 30px;
    }
    .menuSlide ul li{
        cursor: pointer;
    }
    .menuSlide ul li:active{
        color: #63a5fc !important;
    }
    .menuSlide ul li a{
        text-decoration: none;
    }
    .menuSlide .donateNow{
        width: 100%;
        width: -webkit-fill-available;
        height: 40px;
        background-color: #63a5fc;
        border: none;
        border-radius: 10px;
        margin: 60px 0px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
    }
    .menuSlide .donateNow:active{
        background-color: #044aa5;
    }
    .menuSlide p{
        font-size: 16px;
        font-weight: 800;
        margin-top: 30%;
        margin-bottom: 10px;
    }
}