/* Global Styles */

*{
  box-sizing: border-box;
}

body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:#393939;
  margin: 0;
}

h1, h2, h3, h4, h5{
  margin: 0;
}

html{
  scroll-behavior: smooth;
}
/* Utility */


/* Navabar */

.navContainer{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding:1rem 4rem 1rem 4rem;
  background-color: #393939;
  border-bottom: 2px solid rgb(63, 61, 61)
}

.navLogoContainer{
  align-items: center;
}

.navLogo{
  width: 140px;
  display: block;
}

.navButtonsContainer{
  display: flex;
  flex-direction: row;
}

.navButton{
  padding-left: 1.5rem;
}

.navButton > a{
  text-decoration: none;
  color: white;
}

.navButton > a:hover{
  color:#f6c044;
}

@media (max-width: 640px){
  .navButtonsContainer{
    flex-direction: column;
    gap: 0.25rem;
  }
}


/* Hero Section */
.heroContainer{
  background-color: #393939;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 2rem 6rem 2rem 6rem;
  min-height: 600px;
}

.heroLeftContainer{
  flex: .75;
  min-width: 380px;
}

.heroTitleContainer{

}

.heroTitleText{
  font-size: 4rem;
  color: white;
}

.heroTitleTextYellow{
  color: #f6c044;
  font-size: 4rem;
  display: block;
  /* -webkit-text-stroke: #393939 1px; */
  /* text-shadow: #393939 1.5px 1.5px 0px; */
}

.heroTagLineText{
  color: white;
  font-style:italic;
  font-size: 1.5rem;
  /* -webkit-text-stroke: #393939 0.4px; */
  /* text-shadow: #393939 0.75px 0.7px 0px; */
}

.heroDetailsContainer{
  color: white;
  padding-right: 6rem;
}

.heroTextSpan{
  color: #f6c044;
  font-weight: bold;
}

.heroButton{
  background-color: #336284;
  color: white;
  height: 2.5rem;
  width: 8rem;
  border-radius: 4px;
  border: none;
}

.heroButton:hover{
  background-color: #267cb2;
  cursor: pointer;
}

.heroImageContainer{
  flex: 1;
  padding-top: 2rem;
}

.heroImageWide{
  width: 100%;
  border-radius: 8px;
}

@media (max-width: 1100px){
  .heroContainer{
    flex-direction: column;
    padding: 2rem 2rem 2rem 2rem;
  }
  .heroLeftContainer{
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
  }
  .heroTitleContainer{
    width: 100%;
  }
  .heroTitleText, .heroTitleTextYellow{
    font-size: 2.5rem;
    text-align: center;
  }
  .heroTagLineText{
    text-align: center;
  }
  .heroDetailsContainer{
    padding: 0;
  }
  .heroButton{
    
  }
}

/* Services and Partners */
.servicesPartnersContainer{
  background-color: white;
  min-height: 600px;
}

.servicesSectionTitleText{
  color:#393939;
  font-size: 2rem;
  text-align: center;
  padding-top: 2rem;
}

.servicesSectionHeaderSubtext{
  text-align: center;
}
.servicesSectionHeaderSubtext::before,
.servicesSectionHeaderSubtext::after{
  display: inline-block;
  content: "";
  border-top: 1px solid black;
  width: 5rem;
  margin: 0 1rem;
  transform: translateY(-.3rem)
}

.servicesCardsContainer{
  padding: 0 2rem 0 2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.servicesCard{
  padding: 1.5rem 2rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 420px;
}

.servicesCardImageContainer{
  height: 200px;
  width: 100%;
  align-self: center;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.servicesCardGrowthImage{
  height: 90%;
}

.servicesCardStaffImage{
  height: 90%;
}

.servicesCardIndustryImage{
  height: 75%
}

.servicesCardTitleText{
  color: #393939;
}

.servicesCardTitleText::before{
  content: "";
  border: 3px solid #f6c044;
  margin-right: 1.5rem;
}

.servicesCardTextDescription{
  color: #393939;
}

.contactUsLinkServices{
  text-decoration: none;
  color:#336284;
}

@media (max-width: 1100px){
  .servicesCardsContainer{
    flex-direction: column;
    align-items: center;
  }
}

.subSectionBreakLine{
  width: 20%;
  border-top: 1px solid #ada8a8;
  margin: 1.5rem auto 4rem auto;
}

/* Courses & Workshops List */

.coursesWorkshopsContainer{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items:start;
  gap: 1rem;
  margin: 2rem;
}

.coursesWorkshopsListSubcontainer{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem 0 2rem;
}

.seeCoursesButton{
  height: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 4px;
  border: none;
  box-shadow: -3px 3px 8px #393939;
  background-color: #336284;
  color: white;
  max-width: 18rem;
  margin: 1rem auto 0 auto;
}

.seeCoursesButton:hover{
  background-color: #267cb2;
  cursor: pointer;
}

.seeWorkshopsButton{
  height: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 4px;
  border: none;
  box-shadow: -3px 3px 8px #393939;
  background-color:#336284;
  color:white;
  max-width: 18rem;
  margin: 1rem auto 0 auto;
}

.seeWorkshopsButton:hover{
  background-color:#267cb2;
  cursor: pointer;
}

.coursesWorkshopsListDescription{
  max-width: 30rem;
}

.coursesList{
  list-style-type: none;
  max-width: 35rem;
  display: none;
}

.workshopsList{
  list-style-type: none;
  max-width: 35rem;
  display: none;
}

li > h4::before{
  content: "";
  border: 3px solid #f6c044;
  margin-right: 1.5rem;
}


li > p{
  padding-left: 1.85rem;
  margin-bottom: 2.5rem;
}

.coursesWorkshopsEnrollContainer{
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto 3rem auto;
}

.coursesWorkshopsEnrollTitle{
  align-self: center;
  margin-bottom: 0.5rem;
}

.coursesWorkshopsEnrollDescription{
  padding: 0 2rem 0 2rem;
  margin-bottom: 2rem;
}

.contactUsLinkCoursesWorkshops{
  text-decoration: none;
  color:#336284;
}

.goToSalesConceptsButtonLinkContainer{
  align-self: center;
}

.goToSalesConceptsButton{
  height: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 4px;
  border: none;
  box-shadow: -3px 3px 8px #393939;
  background-color:#f6c044;
  color:#393939;
  margin: auto;
}

.goToSalesConceptsButton:hover{
  border:2px solid #666363;
  cursor: pointer;
}

@media (max-width: 1150px){

  .coursesWorkshopsContainer{
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
  }

  .coursesWorkshopsListDescription{
    text-align: center;
  }

  .coursesList, .workshopsList{
    padding: 0 2rem 0 2rem;
  }

  li > h4::before{
    content: "";
    margin: 0;
    border: none;
  }

  li::before{
    content: "";
    border: 6px solid #f6c044;
    display: block;
    width: 1px;
    margin: 0 auto 1rem auto;
  }

  li > h4{
    text-align: center;
  }

  li > p{
    padding: 0;
    font-size: 0.8rem;
    text-align: center;
  }

}

/* About */
.aboutContainer{
  min-height: 600px;
  background-color: #393939;
}

.aboutSectionTitleText{
  font-size: 2rem;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  color: white;
}

.allAboutContainers{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 2rem 6rem 0 6rem;
}

.personAboutContainer{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-bottom: 4rem;
}

.nameTitleContainer{
  color:#f6c044;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}

.aboutDetailsContainer{
  color: white;
  width: 25rem;
}

.headshot{
  width:200px;
  margin-bottom: 1rem;
  border-radius: 20px;
  filter: grayscale(25%);
}

@media (max-width: 1100px){
  .personAboutContainer{
    flex-direction: column;
  }
  .aboutDetailsContainer{
    padding: 0 2.5rem;
  }
  .headshot{
    margin-bottom: 0;
  }
}

/* Contact */
.contactContainer{
  background-color: white;
  min-height: 600px;
}

.contactSectionTitleText{
  color: #393939;
  font-size: 2rem;
  text-align: center;
  padding-top: 2rem;
}

.contactInfoAndFormContainer{
  padding-top: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

}

.contactInfoDetailsContainer{
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.contactForm{
  display: flex;
  flex-direction: column;
}

.formNamePhoneContainer{
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.formNameContainer, .formPhoneContainer{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.contactField{
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  height: 2rem;
  border-radius: 6px;
  border: 2px solid #8d8888;
  padding-left: 0.5rem;
}

.contactField:focus{
  border: 2px solid #393939;
  outline: none;
}

.contactFieldFullMessage{
  border-radius: 6px;
  border: 2px solid #757575;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
}

.contactFieldFullMessage:focus{
  border: 2px slid #393939;
  outline: none;
}

.contactSubmitButton{
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 12rem;
  height: 2.5rem;
  background-color: #336284;
  border-radius: 6px;
  border: none;
  color: white;
  box-shadow: 3px 3px 6px #393939;
}

.contactSubmitButton:hover{
  background-color: #267cb2;
  cursor: pointer;
}

.messageSentConfirmationLine{
  color: #25a514;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

@media (max-width: 1100px){
  .contactInfoAndFormContainer{
    flex-direction: column;
    align-items: center;
  }
  .contactInfoDetailsContainer{
    padding: 0 0 2rem 0;
  }
  .contactForm{
    max-width: 80vw;
  }
  .formNamePhoneContainer{
    flex-direction: column;
    width: 75%;
    gap: 0;
  }
}

/* Footer */

.footerContainer{
  background-color: #393939;
  border-top:2px solid rgb(63, 61, 61);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.footerText {
  margin: 0;
  color: gray;
  text-decoration: none;
}

.imageAttribution{
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px){
  .footerContainer{
    flex-direction: column;
    gap: 1.25rem;
  }
}