*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

font-family:"Nunito",sans-serif;

background:#fff8ef;

color:#30494d;

}




.navbar{

width:90%;

margin:25px auto;

background:white;

padding:18px 30px;

border-radius:40px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.logo-area{

display:flex;

align-items:center;

gap:15px;

}


.logo-area img{

width:65px;

}



.logo-area h2{

color:#214b49;

}



.logo-area span{

font-size:13px;

color:#718786;

}



nav{

display:flex;

gap:10px;

}



nav a{

text-decoration:none;

padding:12px 18px;

border-radius:25px;

color:#466567;

font-weight:bold;

}



nav a:hover,
nav .active{

background:#dcf4e9;

color:#287b68;

}





.hero{

display:flex;

align-items:center;

justify-content:space-between;

padding:90px 10%;

min-height:80vh;

}



.hero-text{

max-width:650px;

}



.welcome-tag{

background:#dcf4e9;

display:inline-block;

padding:12px 20px;

border-radius:30px;

margin-bottom:25px;

}



.hero h1{

font-size:75px;

line-height:1;

color:#214b49;

}



.hero p{

font-size:22px;

line-height:1.7;

margin:30px 0;

}



.hero-buttons a{

display:inline-block;

padding:16px 35px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

}



.hero-buttons a:first-child{

background:#63c7aa;

color:white;

}



.hero-buttons a:last-child{

border:2px solid #63c7aa;

color:#287b68;

margin-left:10px;

}




.hero-picture{

position:relative;

}



.illustration{

height:340px;

width:340px;

background:#dcf4e9;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}



.illustration img{

width:160px;

}



.bubble{

position:absolute;

top:10px;

right:-30px;

background:white;

padding:18px 25px;

border-radius:25px;

}





section{

padding:80px 10%;

}




h2{

text-align:center;

font-size:45px;

color:#214b49;

margin-bottom:35px;

}




.story-box{

background:white;

padding:45px;

border-radius:40px;

display:flex;

gap:40px;

align-items:center;

}



.story-image{

font-size:70px;

background:#dcf4e9;

width:150px;

height:150px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}



.story-box p{

font-size:20px;

line-height:1.7;

}





.service-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.service-card{

padding:40px;

border-radius:35px;

}



.green{

background:#dcf4e9;

}



.blue{

background:#e5f2ff;

}



.pink{

background:#ffe7ef;

}



.icon{

font-size:55px;

}



.service-card a{

text-decoration:none;

color:#287b68;

font-weight:bold;

}





.goals{

background:#e5f7ef;

}



.goal-box{

background:white;

max-width:700px;

margin:auto;

padding:30px;

border-radius:35px;

}



.goal-box p{

padding:15px;

font-size:20px;

}





.founder{

display:flex;

align-items:center;

gap:60px;

}



.founder-photo{

width:230px;

height:230px;

background:#dcf4e9;

border-radius:50%;

border:7px solid #63c7aa;

}





.help-now{

background:#fff0df;

margin:60px 10%;

border-radius:50px;

text-align:center;

}



.help-icon{

font-size:60px;

}



.help-now p{

font-size:20px;

line-height:1.6;

}



.help-now a{

display:inline-block;

background:#63c7aa;

color:white;

padding:16px 35px;

border-radius:30px;

text-decoration:none;

margin-top:20px;

font-weight:bold;

}




footer{

background:#214b49;

color:white;

text-align:center;

padding:40px;

}



footer img{

width:60px;

}




@media(max-width:900px){

.navbar,
.hero,
.story-box,
.founder{

flex-direction:column;

}



nav{

flex-wrap:wrap;

justify-content:center;

}



.hero h1{

font-size:50px;

}



.service-grid{

grid-template-columns:1fr;

}

}

/* CARTOON STYLE */


.story-image img{

width:100px;

height:100px;

object-fit:contain;

}



.icon img{

width:75px;

height:75px;

object-fit:contain;

}



.service-card{

transition:.25s;

}



.service-card:hover{

transform:translateY(-8px);

}




.hero::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:#e8f7ef;

border-radius:50%;

top:150px;

left:-100px;

z-index:-1;

}



section{

position:relative;

}





/* SOFT SHAPES */


.hero-picture::after{

content:"";

position:absolute;

width:80px;

height:80px;

background:#ffe7ef;

border-radius:50%;

bottom:-20px;

right:-20px;

}





button,
a{

transition:.2s;

}



a:hover{

opacity:.85;

}

.founder-photo{

width:240px;
height:240px;
border-radius:50%;
overflow:hidden;
background:#dcf4e9;
border:7px solid #63c7aa;
box-shadow:0 10px 25px rgba(0,0,0,.1);

}


.founder-photo img{

width:100%;
height:100%;
object-fit:cover;

}