/* Styling for Navbar */
body{
    display: block;
    overflow-x: hidden;
}

nav{
    background-color: #fff3b0;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.navbar-brand img {
    max-height: 150px;
}

.navbar-brand{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 900;
    color: #683aa4;
}

nav ul li a {
    color: #683aa4;
    font-size: 22px;
    margin: auto 10px; 
}

nav ul li a:hover{
    color: #683aa4;
}

.dropdown-menu .dropdown-item {
    font-size: 16px;
    margin: auto 2px;
}

.dropdown-menu .dropdown-item:hover {
    margin: auto 2px;
}

/* Cover Styling */
#cover {
    padding-top: 30vh;
    padding-bottom: 10vh;
    background-color: whitesmoke;
    align-content: center;
}

#cover h1 {
    font-weight: 900;
    color: #e09f3e;
    text-align: center;
    margin-bottom: 20px;
}
/* Styling for Hero Section */
section{
    padding-top: 200px;
    padding-bottom: 50px;
}
 
section h1{
    
    /*text-transform: uppercase;*/
    font-size: 48px;
    text-align: left;
    margin-bottom: 20px;
} 

section p{
    
    font-size: 16px;
    font-weight: 300;
}

button{
    max-width: 50%;
    border-radius: 50px !important;
}

#hero {
    height: 100vh;
    /*font-family: 'Pacifico', serif;*/
    background-color: #e09f3e;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
#hero .col{
    justify-content: center;
    flex-direction:  column;
    display: flex;
}


#hero .img-col{
    justify-content: flex-end;
    margin-top: 100px;
}

#hero img{
    max-width: 450%; !important;
    width: 150%;
}

/* Styling for icon if you add them */
#hero .icon{
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

/* Styling for the Missions Section */
#mission {
    background-color: #9e2a2b;
}

#mission .h1{
    font-weight: 900;
    color: #fff3b0;
    text-align: center;
    margin-bottom: 20px;    
}
#mission .col{
    justify-content: center;
    flex-direction: column;
    display: flex;
}

#mission .img-col{
    justify-content: flex-end;
    margin-top: 100px;
}

#mission img{
    max-width: 100%;
    width: 100%;
}

#mission .icon{
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

#mission .card{
    box-shadow: 11px 7px 16px #f9f9f9;
    border: 0;
    text-align: center;
}

#mission .cards .card{
    width: 18rem;
}
/* Styling for the Projects Section */
#projects .projects{
    margin-bottom: 50px;
}
/* Vollunteer section styling*/
#volunteer {

}

#volunteer .img {
    /*max-width: 150% !Important;
    width: 125%;*/
}

/* contact section styling */
#contact{  
    height: 100vh;
    background-color: #540b0e;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    
}

#contact .col{
    justify-content: left;
    flex-direction: column;
    display: inline;
}

#contact .img-col{
    justify-content: flex-start;
}

#contact img{
    max-width: 150%; !important;
    width: 100%;
}

>#contact .h3{
    text-align: center;
    font-size: 14px;
}

#soccer {
    height: 100vh;
    /*font-family: 'Pacifico', serif;*/
    background-color: #9e2a2b;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#soccer .container {
    padding: 100px
}


@media (min-width: 992px) {
    .rotate-lg {
        transform: rotate(6deg);
    }
    .rotate-right {
        transform: rotate(-6deg)
    }
}

#daycare {
    height: 100vh;
    /*font-family: 'Pacifico', serif;*/
    background-color: #540b0e;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#daycare .container {
    /*padding: 100px */
}

#afterschool {
    height: 100vh;
    /*font-family: 'Pacifico', serif;*/
    background-color: #e09f3e;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#afterschool .container {
    /*padding: 100px */
}


/* Footer */
.footer {
    position: sticky;
    bottom: 0;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff3b0;
    background-color: #335c67 
}