@media screen and (max-width: 800px){
    /* Mobile-specific styles here */
    body{
        flex-direction: column;
        display: flex;
    }
    #desktop_menuBar{
        display: none;
    }
    #mobile_topMenuBar {
        height: 50px;
        background-color: #F7F7F7;
        position: fixed;
        top: 0px;
        width: 100vw;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Adds shadow to the bottom */
    }
    .mobile_menu_item{
        color:var(--joeGreen);
        font-size: 32px;
        padding-left: 20px;
        height:40px;
        line-height: 40px;
        background-color: #F7F7F7;
        margin-top: 5px;
        margin-bottom: 5px;

    }
        /* Menu Button 1 */
        .menu-btn-1 {
            height: 32px;
            width: 40px;
            cursor: pointer;
            margin-top: 10px;
            margin-right: 10px;
        }
    
            .menu-btn-1 span,
            .menu-btn-1 span::before,
            .menu-btn-1 span::after {
                background: var(--joeGreen);
                border-radius: 3px;
                content: '';
                position: absolute;
                width: 40px;
                height: 3px;         
                margin-top: 13px; 
    
                -webkit-transition: .3s ease-in-out;
                -moz-transition: .3s ease-in-out;
                -o-transition: .3s ease-in-out;
                transition: .3s ease-in-out;
            }
    
            .menu-btn-1 span::before {
                margin-top:-12px;
            }
    
            .menu-btn-1 span::after {
                margin-top:12px;
            }
    
            .menu-btn-1.active span {
                background: transparent;
            }
    
            .menu-btn-1.active span::before {
                margin-top: 0;
    
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
            }
    
            .menu-btn-1.active span::after {
                margin-top: 0;
    
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }
            #underMobileMenu{
                height:50px;
            }
            #section1{
                background-color: white;
            }


        
            #dropDownMobileMenu{
                position: fixed;
                top:-250px;
                height:195px;
                width:100%;
                background-color: #F7F7F7;
            }
            #mobile_menu_home{
                margin-top: 10px;
            }
            #mobile_topMenuIconBox{
                margin-left:10px;
                width:50px;
                height:50px;
            }
            #mobile_topMenuIcon{
                width:100%;
                height:100%;
            }
            #mobile_topMenuText{
                margin-left: 5px;
                line-height: 50px;
                color:var(--joeGreen);
                font-size: 26px;
            }
            #howitworksBox {
                overflow: hidden; /* Ensures the image does not overflow its container */


            }
            
            #howitworksImg {
                width: 50%; /* Start with 50% of the container width or any value that suits your design */
                height: auto; /* This maintains the aspect ratio */
                display: block; /* Ensures the image doesn't have extra space below (inline-block default behavior) */
                margin-left: auto;
                margin-right: auto;
                opacity: 0;
            }
            #section3content{
                margin-left: auto;
                margin-right: auto;
                width:50%;
                height:auto;
                background-image: linear-gradient(to bottom, #FDC800, #FFE692);
                opacity: 0;
            }
            #fundraiseBox{
                width: 100px;
                height: 100px;
            }
            #fundRaiseText{
                color:white;
                font-size: 32px;
                line-height: 100px;
            }
            #fundraiseRow{
                margin-top: 20px;
                margin-left: auto;
                margin-right: auto;
            }

            #fundRaisingDescript{
                margin-left: 20px;
                margin-right: 20px;
                margin-top: 40px;
            }
            #startRaising{
                background-color: var(--joeGreen);
                width:100px;
                margin-left: auto;
                margin-right: auto;
            }
            #becomeroaster{
                background-color: var(--joeGreen);
                width:125px;
                margin-left: auto;
                margin-right: auto;
            }

            #section5{
                height:625px;
            }
            .sectionHead{
                color:var(--joeGreen);
                font-size: 36px;
                text-align: center;
            }
            .sectionHead_white{
                color:white;
                font-size: 32px;
                text-align: center;
            }
            p{
                margin-left: 20px;
                margin-right: 20px;
                text-align: center;
            }
            #section2{
                flex-direction: column-reverse !important;
                display: flex;
                justify-content: space-between;
                gap: 20px;
                background: linear-gradient(to bottom, #ffeaa3, #FFC609);
               
            }
            #section3{
                flex-direction: column;
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
                gap: 10px;
            }
            #section3OrgBox{
                background: linear-gradient(to bottom, #1c71e6, #619cee);
                height:600px;
                width:100%;
            }
            #section3OrgImage{
                height: 250px;
            width: auto;
            margin-top: 40px;
            }
        
            #section3RoasterImage{
                height: 250px;
            width: auto;
            margin-top: 40px;
            }
            #section3RoasterBox{
                background: linear-gradient(to bottom, #fe9a5e,#FE6A12);
                height:600px;
                width:100%;
            }
            .section3Image{
                margin-left: auto;
                margin-right: auto;
            }
            #contactusform{
                height: 460px;
                background-color: white;
                margin-left: 10px;
                margin-right: 10px;
            }
            #contactusBtn{
                margin-left: auto;
                margin-right: auto;
                background-color: #fe9a5e;
                color:white;
                height: 40px;
                width:150px;
                font-weight: 900;
                border:none;
                margin-top: 20px;
                margin-bottom: 20px;
                cursor: pointer;
            }
            #section4{
                background-color: var(--joeGreen);
                height: 600px;
            }
            .section3para{
                margin-left: 40px;
                margin-right: 40px;
                color:white;
            }
            .contact_item{
                margin-left: 20px;
                margin-right: 20px;
            }
            #section2GraphicsBox{
                margin-bottom: 40px;
            }
            #hiw_svg{
                margin-left: -20px;
            }
            .hiw_item{
                margin-bottom: 15px;
                font-size: 17px;
                margin-left: 20px;
                margin-right: 20px;
                margin-top: 10px;
                color:var(--joeGreen);
            }
            .hiw_heading{
                font-weight: 900;
                font-size: 24px;
                color:var(--joeGreen);
                margin-left: 10px;
            }
            /* **** END OF MOBILE ***** */
}