:root {
    --color: rgba(255,255,255,.7);
    --msgbg: #ddd;
    --msgbghover:green;
    --msgcolor: rgba(0,0,0,.5);
    --navbg: rgba(90,46,144,.8);
    --boxbg: linear-gradient(to right top, #1a1675, #2d178a, #41169e, #5711b2, #6e00c5);
    --boxcol: rgba(255,255,255,.7);
}

html { scroll-behavior: smooth; }
body { margin: 0 auto; font-family:'Roboto', sans-serif; font-weight:300;  }
a { text-decoration: none; cursor: pointer; }
ul { padding: 0px; list-style: none; }


header { display: grid; grid-template-columns:1fr auto; justify-content: center; align-items: center; padding:1em 5em; width:calc(100vw - 10em); position:absolute; top:0px; }
header .brand img { max-height:150px; animation:fadeInDown 1.5s; }
nav { display: grid; grid-auto-flow: column; grid-gap:1em; }
nav a { display: block; color:rgba(255,255,255,0.9); font-weight:400; font-size:1.4em; white-space: nowrap; }


.navbar { position: sticky; top:0px; }
.navbar .brand img { max-height:100px; animation:fadeInDown 1.5s; }
.navbar nav a { display: block; color:rgba(255,255,255,0.9); font-weight:400; font-size:1.2em; white-space: nowrap; }
.navbar nav { background:var(--navbg); padding:1em 1.5em; border-radius:50px; }


section { display: grid; grid-template-columns:1fr 1fr; justify-content: center; align-items: center; min-height:calc(100vh); }
section a { text-decoration: none; color:rgba(0,0,0,.7); }
.bg { background:url('../img/bg2.png'); background-position:top; background-repeat: no-repeat; background-size:150% ;  }
.bg2 { background:url('../img/bg3.png'); background-position:top; background-repeat: no-repeat; background-size:cover;  }
.home { padding:1em; justify-content: center;  text-align: center;  }
.home h3 { font-size:2.5em; color:rgba(255,255,255,.9); text-shadow:1px 1px 5px rgba(0,0,0,0.3); animation:slideInLeft 1s; }
.home img { animation:fadeInRight 1s; max-height:500px; }

section#testimony { display: grid; grid-template-columns: 1fr; grid-template-rows:1fr 1fr; justify-content: center; align-items: center; grid-gap:.5em; padding:1em; }
#testimony h3 { font-size:2.5em; color:var(--color); font-weight:400; display:grid; text-align: center; align-items: end; justify-content:center; }
#testimony h3 > small { display: block; font-size:.5em; color:rgba(255,255,255,0.3); font-weight:400; text-align: center; }
#testimony .testimonies { display: grid; grid-template-columns:auto 1fr; max-width:70%; margin: 0 auto; text-align: justify; align-items: center; }
#testimony .testimonies.opp { display: grid; grid-template-columns:1fr auto; max-width:70%; margin: 0 auto; text-align: justify; align-items: center; }
#testimony .testimonies p { display: grid; text-align: justify; background:var(--msgbg); color:var(--msgcolor); font-weight:400; padding:1em; border-radius:7px; align-items: center; transition:.5s all; }
#testimony .photobox { display: grid; text-align: center; grid-template-columns:1fr; grid-template-rows:1fr auto; justify-content: center; align-items: center; padding:.5em 1em; padding-top:1.5em;  }
#testimony .photobox > img { display: block; margin: 0 auto; max-width:50px; max-height:50px; border:3px solid rgba(0,0,0,.2); border-radius:50px; transition:.5s all; }
#testimony .photobox h5 { font-weight:500; color:rgba(0,0,0,.5);  transition:.5s all; }
#testimony .testimonies:hover img { border:3px solid var(--msgbghover); box-shadow:3px 5px 5px 0px rgba(0,0,0,.2); }
#testimony .testimonies:hover h5 { color:var(--msgbghover); }
#testimony .testimonies:hover p { background:var(--msgbghover); color:var(--color); box-shadow:3px 5px 5px 0px rgba(0,0,0,.2); }
#testimony > div { display: grid; align-self: start; }


section#contact{ display: grid; grid-template-columns: 1fr; grid-template-rows:1fr; justify-content: center; align-items: center; grid-gap:.5em; padding:1em; }
#contact > div { min-height:50vh; align-self: center; }
#contact h3 { font-size:2.5em; color:rgba(0,0,0,.8); font-weight:400; display:grid; text-align: center; align-items: end; justify-content:center; }
#contact h3 > small { display: block; font-size:.5em; color:rgba(0,0,0,.5); font-weight:400; text-align: center; }
#contact h4 { display: block; color:var(--msgbghover); text-align: center; font-size:3em; font-weight:400; cursor: pointer; transition:.5s all; text-shadow:5px 5px 1px rgba(0,0,0,.1); }
#contact h4:hover { color:rgba(0,0,0,.7); font-size:3.5em; text-shadow:-5px -5px 1px rgba(0,0,0,.1); }

#contact h5 { display: block; color:var(--msgbghover); text-align: center; font-size:1em; font-weight:400; cursor: pointer; transition:.5s all; text-shadow:5px 5px 1px rgba(0,0,0,.1); }
#contact h5:hover { color:rgba(0,0,0,.7); font-size:2em; text-shadow:-5px -5px 1px rgba(0,0,0,.1); }
#contact .combo { display:grid; grid-template-columns:1fr 1fr; grid-gap:1em; } 

section#why { display: grid; grid-template-columns:1fr; }
section#why > div { display: grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; justify-content: center; align-items: center; text-align:center; grid-gap:1em; padding:1em; }
section#why .box { background:var(--boxbg); padding:1em; border-radius:7px; display:grid; align-items: center; position: relative;  overflow:hidden; min-height:180px; }
section#why .box .mdi { font-size:10em; color:rgba(0,0,0,.1); position: absolute; top:0px; left:0px; }
section#why .box h4 { font-size:1.5em; color:var(--boxcol); font-weight:400; }
section#why .box > .overlay { display: none;  transition:2s all;}
section#why .box:hover > .overlay { color:var(--boxbg); text-shadow:1px 1px 2px rgba(0,0,0,.2); animation:fadeIn 1s; display: grid; position: absolute; top:3px; left:3px; width:calc(100% - 2em - 6px); height:calc(100% - 2em - 6px); padding:1em; background:rgba(255,255,255,1); font-size:1.2em; align-items: center; font-weight:400; overflow:hidden; overflow-y:auto; border:3px solid var(--boxbg); border-radius:7px; }

footer { display: grid; grid-template-columns:1fr auto; padding:1em 2em; align-items: center; background:rgba(0,0,0,.1); font-weight:300; }
footer a { font-weight:400; color:#4F2F92; }


/* Mobile View */
@media (max-width:780px) {
    header { grid-template-columns:1fr; text-align: center; }
    nav { margin:1em; }
    nav a { font-size:1.1em; word-break: keep-all; text-align: center; }
    .home { grid-template-columns:1fr; background:var(--boxbg); }
    .home img { max-width:200px; max-height:200px; display: block; margin: 0 auto; }
    .home h3 { font-size:1.5em; margin-top:50vh; }

    section#testimony {   background:var(--boxbg); grid-template-rows:55vh 1fr; align-items:end; }
    .navbar { background:var(--boxbg); z-index:1; }
    .navbar .brand img { max-width:80px; max-height: 80px;}
    .navbar nav { padding:.5em 1em; }
    .navbar nav a { font-size:.9em; display: grid; justify-content: center; align-items: center; grid-auto-flow: column;  }

    #testimony .testimonies,#testimony .testimonies.opp { grid-template-columns: 1fr; max-width:calc(100% - 2em); grid-gap:1em; padding:.5em; }

    section#why { align-items: start; padding-top:35vh; }
    section#why > div { grid-template-columns:1fr; }

    section#contact { padding-top:10vh; }
    #contact h4 { font-size:1.8em; background:rgba(255,255,255,.9); display: block; padding:.5em; }
    #contact h4:hover { font-size:2em; }
    #contact .combo { grid-template-columns:1fr; grid-gap:1em; } 

    footer { grid-template-columns: 1fr; text-align: center; }

}