*{
    margin:0;
    padding:0;
    font-family: font-family 'Noto Sans JP', sans-serif;
}
.header{
    height:40vh;
    width:100%;
    background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("img/health.jpg");
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}
h1{
    font-size: 3em;
    text-align: center;
}

.navbar{
    min-height: 10vh;
    background:#fff;
    display:flex;
    justify-content: space-between;

}
.logo img{
    height:10vh;
    width:20vh;
    padding:5px 10px;
}

.nav .fa{
    display:none;
    color:#fff;
    margin:10px;
    font-size:30px;
    cursor:pointer;
}

.nav ul li {
    display:inline-flex;
    padding:10px 20px;
    flex:1;
	text-align: right;
    transition:1s;
}
.nav ul li a{
    font-size:1.2rem;
    color:lightslategray;
    text-decoration: none;
}
.sub-menu ul li {
    display :none;
    background:rgb(90, 182, 243);
    padding:10px 0;
    text-align:left;
}
.sub-menu ul li a{
    color:#fff;
}
.nav ul li :hover{
    color:black;
    transition:1s;
}
.nav ul li:hover .sub-menu ul li{
    display:block;
}

.donate button{
    background:rgb(90, 182, 243);
    border:none;
    height:7vh;
    width:30vh;
    margin:10px 10px;
    font-size:1.3rem;
    font-family:Calibri;
    color:#fff;
    border-radius:10px;
    transition:3s;
    cursor:pointer;
}
.donate button:hover{
    background:rgb(88, 243, 88);
    color:#fff;
}

.text-box{
	width:90%;
	color:#fff;
	position:relative;
	top:25%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
}
.text-box h1{
	font-size:62px;
    color:#fff;
}
@media(max-width:700px){
    .header{
        height:30vh;
    }
    .text-box h1{
		font-size:40px;
	}
    .nav ul li{
		display:block;
	}
	.nav{
		position:absolute;
		background:rgb(90, 182, 243);
		height:auto;
		width:200px;
		top:0;
		right:-200px;
		text-align:left;
		z-index:2;
		transition:1s;
	}
	.nav .fa{
		display:block;
	}
	.nav ul{
		padding:30px;
	}
    .row{
       flex-direction:column;
    }
}

section{
    background:transparent;
}


/*----about----*/
.about{
    width:90%;
	margin:auto;
	text-align:center;
	padding-top:20px;
}
.row{
    margin-top:5%;
	display:flex;
	justify-content:space-between;
}
.about-col{
    flex-basis: 50%;
	margin-bottom:5%;
	padding:20px 12px;
	box-sizing:border-box;
}
.about-col p{
    color:rgb(38, 43, 48);
    position:relative;
    margin-top: 20vh;
    font-size:1.3rem;
}
.donate{
    background:rgb(46, 165, 245);
    border:none;
    height:7vh;
    width:30vh;
    margin:10px 10px;
    font-size:1.3rem;
    font-family:Calibri;
    color:#fff;
    border-radius:10px;
    transition:3s;
    cursor:pointer;
}
.donate:hover{
    background:rgb(88, 243, 88);
    color:#fff;
}
.learn{
    background:transparent;
    border:1px solid rgb(88, 243, 88);
    height:7vh;
    width:30vh;
    margin:10px 10px;
    font-size:1.3rem;
    font-family:Calibri;
    color:rgb(90, 182, 243);
    border-radius:10px;
    transition:3s;
    cursor:pointer;
}
.learn:hover{
    background:rgb(88, 243, 88);
    color:#fff;
}
.about-col img{
    height:80vh;
    width:100%;
    padding:0 20px;
    border-radius:10%;
}
@media(max-width:700px){
	.row{
		flex-direction:column;
	}
    .about-col p{
        font-size:1rem;
    }
}

/*------projects------*/

.projects{
	width:80%;
	margin:auto;
	text-align:center;
	padding-top:50px;  
    background:transparent;
}
.projects-col{
	flex-basis:32%;
    height:90vh;background: #fff;
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
	border-radius:10px;
	margin-bottom:30px;
	position:relative;
	overflow:hidden;
}
.projects-col img{
	width:100%;
	height:35vh;
	display:block;
}
.layer{
	background:transparent;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	transition:0.5s;
}
.layer:hover{
	background:rgba(76, 168, 255, 0.7);
}
.layer h3{
	width:100%;
	font-weight:500;
	color:#fff;
	font-size:26px;
	top:0%;
	left:50%;
	transform:translateX(-50%);
	position:absolute;
	opacity:0;
	transition: 0.5s;
}
.layer:hover h3{
	bottom:49%;
	opacity:1;
}

/*-----Partners-----*/
.partners{
	width:100%;
	margin:auto;
	text-align:center;
	padding:5vh 0;
}
.partners-col img{
    height:30vh;
    width:30vh;
}
.partners-col h3{
	padding-top: 10px;
	font-size:20px;
    color:black;
    text-decoration: none;
}
.partners-col:hover{
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}

/*------testimonials-----*/
.team{
    background:rgb(255, 255, 255);
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
	width:80%;
	margin:auto;
	padding-top:100px;
	text-align:center;
}
.team-col{
	flex-basis:auto;
	border-radius:10%;
	margin-bottom:5%;
	padding:5px;
	cursor:pointer;
	display:block;
}
.team-col img{
	height:150px;
    width:150px;
    background: #fff;
	margin-left:5px;
	margin-right:30px;
	border-radius:50%;
}
.team-col p{
	text-align: center;
}
.team-col h3{
	margin-top:15px;
	text-align:center;
}

/*------footer-----*/
.footer {
    width:80%;
	margin:auto;
	padding-top:100px;
	text-align:center;
}
.footer-row{
    min-height:30vh;
    background:rgba(35, 113, 185, 0.7);
    display:flex;
    color:#fff;
}
.footer-col{
	flex-basis:44%;
	border-radius:10%;
	margin-bottom:5%;
	padding:20px;
	cursor:pointer;
	display:flex;
}
.footer-col ul{
    padding:30px 10px;

}
.footer-col ul a img{
    height:10vh;
    width:10vh;
    border-radius: 25px;
    transition:0.5s;
}
.footer-col ul img:hover{
    height:12vh;
    width:12vh;
}
.footer-col a img{
    height:15vh;
    width:15vh;
    border-radius:50px;
}
.footer-col a img:hover{
    color:blue;
}

@media(max-width:700px){
	.footer-row{
		flex-direction:column;
	}
}