body {
    margin: 0%;
    padding: 0%;
    font-family: 'Times New Roman', Times, serif;
}



/*  new navbar */


*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;

}


nav{
    height: 80px;
    width: 100%;
    background: #34495e;
}

label.logo{
    font-size: 35px;
    font-weight: bold;
    color: white;
    padding: 0 100px;
    line-height: 80px;
}

nav ul{
    float: right;
    margin-right: 40px;
}

nav li{
    display: inline-block;
    margin: 0 8px;
    line-height: 80px;

}

nav a{
    color: white;
    font-size: 25px;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 3px;
}

a.active,a:hover{
    border: 1px solid white;
    transition: 0.2s;

}

nav #icon{
    color: white;
    font-size: 30px;
    line-height: 80px;
    float: right;
    margin-right: 40px;
    cursor: pointer;

}

@media (max-width:909px) {
    

    nav{
        height: 50px;
        width: 100%;
        background: #9fbedd;
    }

    label.logo{
        font-size: 25px;
        font-weight: bold;
        color: white;
        padding: 0 20px;
        line-height: 50px;
        margin-left: 2rem;
        color: black;
    }

    nav ul{
        position: absolute;
        width: 100%;
        height: 0vh;
        background:black;
        top: 2px;
        left: 0;
        margin-left: 2rem;
        color: black;
        

    }

    nav li{
        
        margin: 3.5rem 1rem;
        padding: 4px;
        line-height: 10px;
        color: black;
        margin-left: 0.2rem;
        margin-top: 4rem;
    }

    nav a{
        font-size: 20px;
        font-weight: 600;

    }

    a:hover{

        border: none;
        color: #3498db;

    }

    nav ul.show{
        left: 0;

    }

}





/*  end new navbar */



.mid{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
}

.mid h2 {
    padding-bottom: 2rem;
    color: white;
    font-size: 3rem;
    
}



.click{
    color: rgb(98, 189, 224);
}






.main-image{
    width: 100%;
    height: 100vh;

}


.index-container .slogan{
    font-size: 35px;
   

}

.index-logos-mobile{
    display: none;
}




/* boot navbar  */




/* end boot  nav */









/*  donate button of index page */




.cta-1{
    display: inline-block;
    padding: 8px 25px;
    color: white;
    background-color: transparent;
    border: 4px solid white;
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: 60px;
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-top: 15px;
    transition: .3s ease background-color;
    margin-bottom: 20px;
    text-decoration: none;


}




/* home button */

.cta-1:hover{
    background-color: crimson;
    color: white;
}


.cta{
    display: inline-block;
    padding: 8px 25px;
    color: black;
    background-color: transparent;
    border: 2px solid crimson;
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: 60px;
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-top: 15px;
    transition: .3s ease background-color;
    margin-bottom: 20px;
    text-decoration: none;


}

.cta:hover{
    background-color: crimson;
    color: white;
}

.connect-foundation{
    font-size: 1.2rem;

}




/*  donate button of index page */
 


/* Style the sidebar - fixed full height */
.sidebar {
    height: 20rem;
    width: 180px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background:url(dounloads/little\ girl\ \(2\)\ side\ bar.jpg);
    overflow-x: hidden;
    padding-top: 16px;
    margin-left: 80rem;
    margin-top: 6rem;
    
  }
  
  /* Style sidebar links */
  .sidebar a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #110e0e;
    display: block;
  }
  
  /* Style links on mouse-over */

  
  /* Style the main content */
  .main {
    margin-left: 360px; /* Same as the width of the sidenav */
    padding: 0px 10px;
  }
  
  /* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }



  /*  media quiry for mobile */


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

    

    /*  all text content .image and button */

    .mid{
        text-align: center;
        position: absolute;
        top: 60%;
        left: 35%;
        width: 100%;
        transform: translate(-50%, -50%);
    }
    
    .mid h2 {
        padding-bottom: 2rem;
        color: white;
        font-size: 1rem;

        
    }
    
    
    
    .click{
        color: red;
        text-align: center;
        margin-left: 25%;
        
    }
    
    
    
    
    
    
    .main-image{
        width: 100%;
        height: 100vh;
    
    }

    .here{
        display: none;
    }
    
    
    .index-container .slogan{
        font-size: 24px;
        margin-left: 8rem;
        margin-top: 3rem;

       
    
    }


    .cta-1{
        display: inline-block;
        padding: 5px 20px;
        color: white;
        background-color: red;
        border: 4px solid white;
        border-radius: 5px;
        font-size: 1rem;
        font-weight: 60px;
        text-transform: uppercase;
        letter-spacing: .1rem;
        margin-top: 15px;
        transition: .3s ease background-color;
        margin-bottom: 10px;
        margin-left: 6rem;
        text-decoration: none;
    
    
    }
    
    
    /* home button */
    
    .cta-1:hover{
        background-color: crimson;
        color: white;
    }

     /*   end  all text content .image and button */



    /* side bar */


    .sidebar {
        height: 15rem;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background:url(dounloads/little\ girl\ \(2\)\ side\ bar.jpg);
        overflow-x: hidden;
        padding-top: 1px;
        margin-left: 1rem;
        margin-top: 25rem;
        display: none;
        
      }
      
      /* Style sidebar links */
      .sidebar a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 20px;
        color: #110e0e;
        display: block;
      }
      
      /* Style links on mouse-over */
    
      
      /* Style the main content */
      .main {
        margin-left: 360px; /* Same as the width of the sidenav */
        padding: 0px 10px;
      }

      .connect-foundation{
          display: none;
      }


      .index-foundation{
          margin-left: 2rem;
         
      }

      .index-logos-mobile{
          display: flex;
          margin-left: 6rem;
          margin-top: 4rem;


      }

      .index-logo-mobile{
          margin: 10px;
      }


      


    /* end side bar */







 

   
    
    
}