/* Head Classes */
body{
    

    
}

/* Classes */

.notNav{
  display: grid;
  grid-template-rows: 65rem 20rem;
  gap: 0px;
  margin: 0;
}

footer{
    background-color: #ffffff;
}

h2 {
    font-size: 5rem;
    font-family: "Farro";
  }

p{
    font-size: 1.6rem;
    width: 45rem;
    font-family: "Nunito Sans";
}

/* Classes */

.pgstyle{
    font-size: 1.2rem;
    line-height: 2rem;
}


.textStyle h2{
    font-family: "Farro";
    font-size: 2rem;
}

.textStyle p{
    font-family: "Nunito Sans";
    font-size: 1.3em;
}

.textStyle tr{
    font-family: "Nunito Sans";
    font-size: 1.3em;
    color: white;
}

.textPos{
    margin-top: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    color: white;
}

.textPos2{
    margin-top: 4.5rem;
    margin-left: 2rem;
    margin-right: 1rem;
    text-align: center;
    color: white;
}



.shadowTop{
    
    box-shadow: inset 0px -10px 3px -2px #88a852;
    
    width: 100%;
    height: 100%;
   
}

.shadowBot{
    
    box-shadow: inset 0px 10px 3px -2px #88a852;
    
    width: 100%;
    height: 100%;
   
}

.shadow{
    
    box-shadow:  0px 0px 3px 10px #88a852;
    
    width: 100%;
    height: 100%;
   
}

.shadow2{
    
    box-shadow:  0px 5px 10px 5px #88a852;
    
    width: 100%;
    height: 100%;
   
}

.sh2{
    box-shadow:  0 9px 0px 0px white, 0 -9px 0px 0px white, 10px -2px 3px 1px #88a852, -10px -2px 3px 1px #88a852;
    
    width: 100%;
    height: 100%;
}

.subtitle{
    text-decoration: overline;
    font-size: 1.5rem;
}

.imageSpace{
    margin:auto;
    background-color: white;
    border-radius: 2px 20px 2px 2px;
    width: 25rem;
    height: 12rem;
}

.logoSpace{
    margin:auto;

}

.photoArea img{
    margin-left: 1.7rem;
    
    margin-top:2rem;
    background-color: #6d9dc5;
    border-radius: 100%;
    width:80%;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
}

.photoArea2 img{
    display:none;
    margin-left: auto;
    margin-right:auto;
    margin-top:2rem;
    background-color: #6d9dc5;
    border-radius: 100%;
    height: 13rem;
    width: 13rem;
}

.heroBody{
    background-color: white;
    margin-left: 7rem;
    margin-top: 4rem;
    border-radius: 30px 30px 0 0;
    width:55%;
    height:100%;
}
.heroBody2{
    background-color: white;
    margin-left: 7rem;
    
  
    width:55%;
    height:100%;
}

.logoSpace img{
    padding-left: 5rem;
    padding-top: .5rem;
}

.logospace2{

}

.navBar{   
    text-decoration: none;
    padding-top: .3rem;

} 

a {
    color: white;
    text-decoration: none; /* no underline */
  }

.navContact{
    background-color: #c56d6d;
    color: rgb(255, 255, 255);
    padding: 5px 0px;
    text-align: center;
    margin-top: 1rem;
    
    text-decoration: none;
    font-family: "Farro";
    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    height: 1.4rem;
    width: 9rem;
    font-size: 16px;
}

.navStyle{
    text-decoration: none;
box-shadow: 10px 10px;
}

.navLi{
    display: inline;
    text-decoration: none;
}


.buttonStyle{
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
    padding: 5px 22px;
    text-align: center;
    
    text-decoration: none;
    font-family: "Farro";
    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    margin: 10px;
    font-size: 16px;

}

.heroBox{
    
    background-color: #6d9dc5;

    height: 70%;
    width: 100%;

    margin-left: 10px;
    border-radius: 5px 0 0 5px;
   
}

.heroBox2{

   
}

.heroBoxg{
    background-color: #B6DC76;
   
    padding-left: 3rem;
    margin:auto;
    height: 90%;
    width: 100%;
   
}

.heroBoxg2{
    background-color: #B6DC76;

    padding-left: 10rem;
    border-radius: 0px 90px 90px 0px;
    margin-top: 2.6%;
    margin-right:10%;
    height: 90%;
   
}

.heroBox h2{
   font-size: 3em;
   margin-bottom: 0;

}


.heroBox p{

    margin-left: 10%;

}

.highlightBox{
    background-image: url('/images/backgroundCard-1.svg');
    margin: auto;
    margin-left: 4rem;  
    background-repeat: no-repeat;
    width: 95%;
    height: 95%;
   
    
}

.highlightBox h2{
    color: white;
    margin-left: 4rem;
    margin-top: .3em; 
    margin-bottom: 0;
    font-size: 2em; 

}

.highlightBox p{    
    color: white;
    margin-top: 0.5em;
    width:14em;
    margin-left: 4rem; 
     
}

.highlightBox img{
    height: 8em;
    width: 8em;
    margin: 3em 3em 0;
}

.contactButton{

    background-color: #c56d6d;
    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    margin-left:15rem;
    margin-top: 3rem;
    
    height: 3em;
    width: 20em;

}

.contactButton p{
    text-align: center;
    margin: 3%;
    font-family: "Farro";
    
    color: rgb(255, 255, 255);
    
}


 /* Style the navigation menu */
 .topnav {
    overflow: hidden;
    background-color: rgb(255, 255, 255);
  padding: none;
  margin:none;
}

 /* Hide the links inside the navigation menu (except for logo/home) */
 .topnav #myLinks {
    display: none;
  }
  
  /* Style navigation menu links */
  .topnav a {
    font-family: "Nunito Sans";
    font-size: 1.3em;
    color: white;
    padding: 10px 16px;
    float: left;
    text-decoration: none;
    text-align: center;
    
    display: block;

   
  }

  .heroBox a {
    font-family: "Nunito Sans";
    font-size: 1.3em;
    color: white;
    padding: 10px 16px;
    margin: auto;
    text-decoration: none;
    text-align: center;
    width: 50%;
    display: block;

   
  }
  
  /* Style the hamburger menu */
  .topnav .icon {
    background-color: #B6DC76;
    display: none;
    margin-top: 1rem;
    height: 2rem;
    width: 2rem;
   border-radius: 5px;
  }

  .icon i {
    font-size: 2rem;
  }

  .topnav .icon:hover {
    background-color: #ddd;
    color: #B6DC76;
  }


.logoSpace{
    margin:auto;

}

.logoSpace2{
  margin:auto;

}


.logoSpace img{
    padding-right: 4rem;
    padding-left: 1rem;
}

.logoSpace2 img{

  height:auto;
  max-width: 80%;
  min-width: 30%;
  padding-left: 2rem;
}

.navBar{   
    
    padding-top: .3rem;

} 

.navContact{
    background-color: #c56d6d;
    color: rgb(255, 255, 255);
    padding: 5px 0px;
    text-align: center;
    margin-top: 1rem;
    
    text-decoration: none;
    font-family: "Farro";
    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    height: 1.4rem;
    width: 9rem;
    font-size: 16px;
}

.navStyle{

box-shadow: 10px 10px;
}

.navLi{
    display: inline;
}



.buttonStyle{
    display: inline;
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
   
    text-align: center;
    
    text-decoration: none;

    border-radius: 14px;
    border:2px solid white;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    margin: 15px 10px;
    

}

.buttonStyle2{
  display: inline;
  background-color: #dc7676;
  color: rgb(255, 255, 255);

  text-align: center;
  
  text-decoration: none;

  border-radius: 14px;
  border:2px solid white;
  box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
  margin: 15px 10px;
  
}

.buttonStyle3{
  font-family: "Nunito Sans";
  background-color: #dc7676;
  color: rgb(255, 255, 255);

  text-align: center;
  
  text-decoration: none;

  border-radius: 14px;
  border:2px solid white;
  box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
  
  text-align: center;
    
  


}

.buttonStyle4{
  
  background-color: #dc7676;
  color: rgb(255, 255, 255);

  text-align: center;
  
  text-decoration: none;

  border-radius: 14px;
  border:2px solid white;
  box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
  
  width: 7rem;
  font-family: "Nunito Sans";

}

.heroBox2 a{
  font-family: "Nunito Sans";
  font-size: 1.3em;
  color: white;
  padding: 10px 26px;
  margin-right: 10px;
  text-decoration: none;
  text-align: center;

  display: inline;
  
}


.topnav a.active {
    background-color: #76abdc;
    color: rgb(255, 255, 255);
  }
  
  /* Style the active link (or home/logo) */
  .active {
    background-color: #B6DC76;
    color: rgb(255, 255, 255);
  } 


  .footer{



  }
  
  .footer li{
  
    display: inline;
    list-style-type: none;
    padding-right: 2rem;
  }
  
  .footerStyle{
    font-family: "Nunito Sans";
    color: #88a852;
    font-size: 1rem;
  }
  
  .footerActive{
    text-decoration: underline;
  
  }  


/* IDs */

#hero{
    display: grid;
    background-color: #B6DC76;
    grid-template-columns: .5fr 1fr;
}

#nav{
    display: grid;
    box-shadow: 10px 10px;
    background-color: rgb(255, 255, 255); 
      
}



#section1{
    display: grid;
    background-color: #B6DC76;
    grid-template-columns: 0.7fr 1fr;
    
}

#section2{
    display: grid;
    background-color: #ffffff;
    grid-template-columns: .5fr 1fr;
    
}

#highlights{
    display: grid;
    background-color: rgb(255, 255, 255);
    grid-template-columns: 1fr 1fr 1fr;
}

#boxes{
   
    background-color: #B6DC76;
   
    
}

#text{
    background-color: #ffffff;
    margin-top: 3rem;
    margin-left: 6rem;
    margin-right: 16rem;

}

.foot{
    
}



/* Media Query */


@media screen and (max-width: 1256px){
    .contactButton{
  
      margin-left:5rem;
   
  }
  
  .notNav{
  
    grid-template-rows: 86rem 20rem;
 
  }

  .topnav a {
    font-family: "Nunito Sans";
    font-size: .8em;
    color: white;
    padding: 10px 16px;
    float: left;
    text-decoration: none;
    text-align: center;
    
    display: block;

   
  }

  .buttonStyle{

    margin: 20px 10px;
    

}

.buttonStyle2{

  margin: 20px 10px;
}



#hero{

    grid-template-columns:  1fr;
}

.heroBody{
    display: none;
} 
.heroBody2{
    display: none;
}

.photoArea2 img{
    display: inline-flex;
    margin-left:40%;
}

.textPos{
    margin-top: 1rem;
    margin-left: 10%;
    margin-right: 1rem;
    color: white;
}
  
  }
  
    
  /* shrink buttons before mobile view */
  @media screen and (max-width: 1135px) {
  
    .notNav{
  
        grid-template-rows: 86rem 20rem;
     
      }

      .topnav a {
        font-family: "Nunito Sans";
        font-size: .8em;
        color: white;
        padding: 10px 16px;
        float: left;
        text-decoration: none;
        text-align: center;
        
        display: block;
    
       
      }
    
      .buttonStyle{
    
        margin: 20px 10px;
        
    
    }
    
    .buttonStyle2{
    
      margin: 20px 10px;
    }
  

  
    #hero{

        grid-template-columns:  1fr;
    }
  
    .heroBody{
        display: none;
    } 
    .heroBody2{
        display: none;
    }

    .photoArea2 img{
        display: inline-flex;
        margin-left:40%;
    }

    .textPos{
        margin-top: 1rem;
        margin-left: 10%;
        margin-right: 1rem;
        color: white;
    }
  }
    
    
    
    /** mobile view
    */
    
    @media screen and (max-width: 955px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }

      .notNav{
  
        grid-template-rows: 94rem 25rem;
     
      }

      .logoSpace{
    
        margin-left: 25%;
    }
  
    .profTable th {
      padding-top: 1em;
      padding-bottom: .9em;
      font-size: .8em;
    }    
  
    .heroBoxp{
  
      width: 24rem;
  
    }

    h2 {
        font-size: 4.5rem;
      }
    
    p{
        font-size: 1.5rem;
        width: 33rem;
    }



    
    }
    /** smallest mobile view
    */
    
    @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
      
      #hero{
        display: grid;
        background-color: #B6DC76;
        grid-template-columns: 1fr;
        
      }
  
      .heroBox{
        border-radius: 25px 25px 25px 25px;
        width: 80%
      }
      
      .logoSpace{
    
        margin-left: 10%;
    }
  
    .photoArea2 img{
      
        margin-left:25%;
    }

    .highlightBox{
   
      margin-left: 15%;
      
      
    }
  
    .logoSpace2{
    
      display: none;
    }
  
    .heroBoxp{
      width: 22rem;
      margin-left: 5%;
  
  }
  
  .heroBox h2{
    font-size: 3em;
    margin-left: 5%;
  
  }

  .heroBox{
    margin-top: 2rem;
    margin-left:3rem;
  }
  
  .contactButton{
  
    width: 15em;
    margin-left:4rem;
  
    
  }

  h2{

  }

  p{
    font-size: 1.5rem;
    width: 23rem;
}

.textPos2{
width: 18rem;
margin-left: 0;
margin-right: 0;
text-align: left;
}
    
  
  
}
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    @media screen and (max-width: 975px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
      
      .proficiencies h2{
        margin-left: 35%;
      
      }
  
    } 


     /** THE END*/

   @media screen and (max-width: 441px){

        .notNav{
  
        grid-template-rows: 105rem 25rem;
     
      }

      .heroBox2 a{
  margin-left: 8rem;
  margin-bottom: 1rem;
 display: flex;

}

.textPos2{
width: 18rem;
padding-left: 1em;

padding-right: 0;
margin-right: 0;
margin-top: 2em;
text-align: center;
}

.textStyle {



}

.logoSpace img{

  
  
  height: 3.7rem;
  padding-left: 2rem;
}

.heroBox p{

    margin-left: 0;

}
.footer li{

  display:inline-table;
  list-style-type: none;
  padding-right: 2rem;
  
  padding-bottom: 1rem;
}




   }