@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;
    }
    .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, .menuSlide 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;
    }

     /*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;
     }
}