@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Raleway:800|Source+Sans+Pro:300,300i,600,600i");
 
/* CSS RESET Begins */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;

   /* border: 0.5px dotted grey; */
    font-size: 62.5%;
    font: inherit;
    letter-spacing:1px;
    vertical-align: baseline;
    font-family:'Roboto Mono',serif;
 }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.5;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* CSS RESET section ENDS */

/* every element is a border-box */
* {
  box-sizing: border-box;
}

/* start your css here */

body {
  /* font-family: 'Source Sans Pro', sans-serif;	 */
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size:62.5%;
  text-align:center;
  max-width:100%;
  margin:0 auto;
}

header {   
    width:100%;
    height:5rem;
    padding-bottom:1%
}

h1{
    font-size:3rem;
    font-style: italic;
    font-weight: 500;
    color: black;
    padding:0.5%;
    text-align: left; 
 }
 h2{
    font-size:2.5rem;
    font-weight: 500;
    font-style: normal;
    color:#3DC5AD; 
    padding:1%;
    text-align: left;
 }
 h3{
    position:absolute;
    z-index: 999;
    margin: 0 auto;
    left:18%;
    top: 18%; /* Adjust this value to move the positioned div up and down */
    width: 60%; /* Set the width of the positioned div */
    font-size:1.6rem;
    font-weight: 300;
    font-style: oblique;
    color:black;
    padding:1%;
    text-align: center;
 }
 h4{
    font-size:1.5rem;
    font-style: italic;
    font-weight: 500;
    color:#3DC5AD;
    padding:0.5%;
    text-align: left;
    line-height: 0px;
 }
 h5{
    font-size:1.3rem;
    font-weight: bold;
    font-style: initial;
    color:black;
    padding-bottom:2%;
    text-align: center;
    line-height: 1px; 
 }

 .navbar {
   background-color: snow;
   display: flex;
   padding: 1.6%;
   color: black;
   font-size: 1.2rem;
   font-family: "Raleway", Helvetica, sans-serif;
   font-weight:500;
 }
  
.NavbarLink-brand{
   color:#74CBC1;
   font-size: 1.8rem;  
   font-weight:bold;
}

.NavbarLink-brand:hover {
   background-color:white;
   color:#74CBC1;
   border-bottom: none;
}
a::before {
   color:black;
   text-decoration: none;
}
 a:hover {
   background-color: snow;
   cursor: pointer;
   font-weight: bold;
   border-bottom: 0.15rem solid #74CBC1;
 }
 
 a:link, a:visited {
   color:#74CBC1;
   text-decoration: none;
}
 .NavbarLink {
   padding-right:1.4rem;
   padding-left: 1.4rem;
 }
 
 .NavbarItems {
   display: flex;
   padding-right: 2%;
   padding-top: 0.5%;
   padding-left: 1%;
 }
 
 .NavbarItemsright {
   margin-left:auto;
 }
 /* Hide toggle icon for desktop view */
 .NavbarLink-toggle {
   display: none;
 }
 
 
 banner{
   display:flex;
   color:white;
   width:100%;
   height:32rem;
   flex-wrap: wrap;
   justify-content: center;
   margin:0 auto;
   font-size:2.5rem;
   font-style: italic;
   font-weight: 300;
   background-image: url('/asset/undraw_good_team_m7uu.svg');
   /* background-image: url('asset/matthew-t-rader-CVmzj-a8Fmg-unsplash.jpg'); */
   background-color: snow;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-align: center;
   border-top: 0.5em solid,#3DC5AD;
   padding-bottom: 30%;
 }

banner p{
   position:absolute;
   z-index: 999;
   margin: 0 auto;
   left:18%;
   top: 28%; /* Adjust this value to move the positioned div up and down */
   text-align: center;
   width: 60%; /* Set the width of the positioned div */
   font-size:1.3rem;
   font-weight: 300;
   font-style: normal;
   color:black;
   opacity: 80%;
   text-align:center;
}
  .midcontainer{
    max-width:90%;
    /* background-color: whitesmoke; */
    display:flex;
    align-items: center;
    justify-content: space-between;
    align-content:flex-start;
    flex-wrap: wrap;
    margin:0 auto;
    font-size:1.2rem;
    font-weight: 200;
    font-style: oblique;
    /* padding-bottom: 10%; */
  }
.midcontainer p{
    color:#3DC5AD;
    font-size: 1.3rem;
    font-style: italic;
    font-weight: bold;
    padding-bottom:1rem;
}
  .midcontainer img{
   width:55%;
   border-radius: 100%;
   object-fit: contain;
   align-content: flex-start;
   padding-top:5%;
   padding-bottom:2%;
  }
  
  .midcontainer div{
    margin:1.5rem;
    background-color: whitesmoke;
    width: 28%;
    padding-top:2%;
    padding-bottom:2%;
    border-radius: 4%;
    /* border-bottom: 1px dashed black; */ 
  }
  
  .indvsocial a{
     /* social icons in indiv sectio */
    text-decoration: none;
    color: black;
 }
 
 .indvsocial ul {
    padding-bottom:10%;
    list-style: none;
    display:flex;
    justify-content: space-evenly;
    }
 
 .indvsocial{
    margin:0% 0% 0% 4%;
 }
  .indvsocial .fa-github {
    padding:5% 5%;
    border-radius: 15%;
    transition: .3s;
    background-color:#74CBC1;
    color:slategray;
 }
 .indvsocial .fa-github:hover {
    background-color: #5a32a3;
 }

 .indvsocial .fa-linkedin {
   padding:5% 5%;
   border-radius: 15%;
   transition: .3s;
   background-color:#74CBC1;
   color:slategray;
}
.indvsocial .fa-linkedin:hover {
   background-color: #0073a4;
   color: white;
   line-height: 1.3rem;
}


  footer{
   margin-top: 2rem;
   background-color: lightgray;
  }
/*Hide brand footer */
footer .NavbarLink-brand {
  display: none;
}
footer .navbar{
  background-color: lightgray;
  justify-content:center;
}
footer .NavbarLink {
 margin:0%;
  padding-right:6rem;
  padding-left: 6rem;
}

footer .NavbarItemsright {
  margin-left:0%;
}
footer a:link, a:visited {
     color:black;
     padding-left: 1px;
     text-decoration: none;
  }
  
  footer  a:hover {
     background-color: lightgray;
     color:#36b39d;
     border-bottom: none;
     transition: .3s;
   }
   /* social icons in footer */
.footersocialicons a{
    text-decoration: none;
    color: black;
 }
 
 .footersocialicons ul {
    padding-bottom:10%;
    list-style: none;
    display:flex;
    justify-content: space-evenly;
    }
 
 .socialicons{
    margin:0% 0% 0% 4%;
 }
  .fa-github {
    padding:5% 5%;
    border-radius: 15%;
    transition: .3s;
    background-color:black;
    /* background-color:#74CBC1; */
 }
 .fa-github:hover {
    background-color: #5a32a3;
 }
  
  /* social icons in footer */
 footer h4{
text-align: center;
padding:1%;
 }
 .fimgcontainer{
    display:flex;
    justify-content: center;
 }
 footer img{
     /* background-color: lightgray; */
     height:20rem;
     /* padding:2%; */
     object-fit: contain;
 }

 /* social icons in footer */
.footersocialicons a{
   text-decoration: none;
   color: snow;
   width: 8rem;
}

.footersocialicons a:hover{
  border-bottom: 0.1rem solid lightgray;
  
}
.footersocialicons ul {
   padding:3.5%;
   list-style: none;
   display:flex;
   justify-content: space-evenly;
}

.socialicons{
  margin:0% 0% 0% 4%;
  font-size: 1.2rem;
} 
 
.fa-facebook {
   padding:15% 15%; 
   border-radius: 45%;
   transition: .3s;
   background-color:#74CBC1;
}
.fa-facebook:hover {
   background-color: #3d5b99;
   color: white;
   line-height: 1.3rem;
}
.fa-twitter {
   padding:15% 15%;
   border-radius: 45%;
   transition: .3s;
   background-color:#74CBC1;
}
.fa-twitter:hover {
   background-color: #00aced;
   color: white;
   line-height: 1.3rem;
}
 
.fa-youtube {
   padding:15% 15%;
   border-radius: 45%;
   transition: .3s;
   background-color:#74CBC1;
}
.fa-youtube:hover {
   background-color: #e64a41;
   color: white;
   line-height: 1.3rem;
}
.fa-linkedin {
   padding:15% 15%;
   border-radius: 45%;
   transition: .3s;
   background-color:#74CBC1;
}
.fa-linkedin:hover {
   background-color: #0073a4;
   color: white;
   line-height: 1.3rem;
}
.fa-github {
   padding:15% 15%;
   border-radius: 45%;
   transition: .3s;
   background-color:#74CBC1;
}
.fa-github:hover {
   background-color: #5a32a3;
   color: white;
   line-height: 1.3rem;
}

/* for mobile - with Media Pixel of up to 500px display column*/
@media only screen and (max-width: 500px){
header{
   margin-top: 1rem;
   background-color: snow;
}  

 

.NavbarItems,
.navbar {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
    padding-bottom: 0.5rem;
    padding-top:0.5rem;
  }
  header .NavbarItems{
   padding-top: 0.1rem;
   align-self:flex-end;
   justify-content:space-evenly;
   align-items: flex-end;
}

/* Make Navbar Items not Visible on mobile*/    
.NavbarItems {
    display:none;
  }

  h5{
   font-size:1rem;
}
  footer .NavbarItems{
     display:flex;
     flex-direction: row;
     flex-wrap: wrap;  
     justify-content: space-evenly;
     align-items:center;
  }

  footer .NavbarItems a{
     padding-right: 0.8%;
  }
.NavbarItemsright {
    margin-left:0;
    align-self:stretch;
    padding:0%;
  }
   
.NavbarToggleShow {
    display: flex;   
  }
/* For mobile view display the toggle at the line end */    
.NavbarLink-toggle {
    align-self: flex-end;
/*     display: initial; */
    display:flex;
    position: absolute; /*is positioned relative to the nearest positioned ancestor*/
    cursor: pointer;
    padding-left: 0%;
    /* padding-bottom: 1%; */
   } 
          
   a:hover {
     background-color: snow;
     cursor: pointer;
     color:#74CBC1;
     border-bottom: 0.1rem solid snow;
   }
   h2{
     font-size:1.4rem;
     padding:1%;
     text-align: center;
  }
h3{   
  left:8%;
  top: 35%; /* Adjust this value to move the positioned div up and down */
  width: 90%; /* Set the width of the positioned div */
  font-size:1.6rem;
  padding:0.5%;
}
banner {
   height: 20rem;
   width: 100%;
   object-fit: contain;
}
banner p{
   display:none;
   }
  
.mlogin{
  display:none;
}

.mlogin{
  position:absolute;
  z-index: 999;
  margin: 0 auto;
  left:38%;
  top: 10%; /* Adjust this value to move the positioned div up and down */
   width: 26%; /* Set the width of the positioned div */
  text-align: center;
} 

.midcontainer{
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items: center;
   align-content: center;
}

 
.midcontainer div{
   width:80%;
   margin-top: 3rem;
   padding: 1rem;
}

.midcontainer P{
   font-size: 1rem;
}
/* Hide toggle icon for footer view */
footer .NavbarLink-toggle {
  display: none;
}
footer img{
  height:12rem;
}

.footersocialicons a{
  width: 3rem;
}
.footersocialicons h4{
   font-size: 1rem;
}
}
/************** FOR 800 PX TAB**********************/
@media only screen and (min-width:501px) and (max-width:810px) 
{

  header{
     margin-top: 1rem;
     background-color: snow;
  }  
 .NavbarItems,
  .navbar {
      flex-direction: column;
      align-items: flex-start;
      /* padding-bottom: 0.5rem; */
      font-size: 1.2rem;
    }
  /* Make Navbar Items not Visible on mobile*/    
  .NavbarItems {
      display:none;
    }
    
 
   banner team h3{
      left:4%;
      top: 1%; /* Adjust this value to move the positioned div up and down */
      width: 80%; /* Set the width of the positioned div */
      font-size:1.2rem;
      padding:0.5%;
    }
    
    banner p{
      left:12%;
      top: 55%; /* Adjust this value to move the positioned div up and down */
      width: 70%; /* Set the width of the positioned div */
      font-size:1.1rem;
      font-weight: 300;
      opacity: 95%;
      text-align: center;
      }
    
   .mlogin{
     display:none;
   }
   
   .mlogin{
     position:absolute;
     z-index: 999;
     margin: 0 auto;
     left:38%;
     top: 10%; /* Adjust this value to move the positioned div up and down */
     width: 26%; /* Set the width of the positioned div */
     text-align: center;
   }
  
 
   .midcontainer{
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      align-content: center;
   }
   
    
   .midcontainer div{
      width:60%;
      margin-top: 3rem;
   }
    
       
    footer .NavbarItems{
       display:flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       font-size: 1.2rem;
    }
  .NavbarItemsright {
      margin-left:0;
      align-self: center;
      align-items: center;
    }
     
  .NavbarToggleShow {
      display: flex;   
    }
  /* For mobile view display the toggle at the line end */    
  .NavbarLink-toggle {
      align-self: flex-end;
  /*     display: initial; */
      display:flex;
      position: absolute; /*is positioned relative to the nearest positioned ancestor*/
      cursor: pointer;
      padding-left: 0%;
      /* padding-bottom: 1%; */
     } 
            
     a:hover {
       background-color: snow;
       cursor: pointer;
       color:#74CBC1;
       border-bottom: 0.1rem solid snow;
     }
     h2{
        font-size:1.8rem;
        padding:1%;
        text-align: center;
     }
 h3{
    left:2%;
    top: 30%; /* Adjust this value to move the positioned div up and down */
    width: 90%; /* Set the width of the positioned div */
    font-size:2rem;
    padding:0.5%;
 }

 h5{
    font-size: 1.4rem;
 }
 .mlogin{
    display:none;
 }
 
  /* Hide toggle icon for footer view */
  footer .NavbarLink-toggle {
    display: none;
  
}
footer img{
  height:15rem;
}
.footersocialicons a{
  width: 5rem;
}

.footersocialicons h4{
   font-size: 1rem;
}

}