@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Space+Grotesk:wght@300..700&display=swap');
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesque-Regular.woff2') format('woff2'),
       url('/fonts/BricolageGrotesque-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Font Styles */
body {
  font-family: 'Space Grotesk';
  background: #443F43;
  background-color: #443F43;
  color: #ECE3EA;
}
.headings {
  font-family: 'Bricolage Grotesque';
  font-weight: bolder;
  font-size: 30pt;
}

.subheadings {
  font-family: 'Space Grotesk';
  font-weight: normal;
  font-size: medium;
}
/* SECTION 1 --------------------------------------------------------------------*/
.header{
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}

.hero-class {
  position: relative;
}
.logoheader {
  position: absolute;
  top: 30px;
  left: 30px;
  height: 60px;
  width: auto;
  z-index: 3;
}
.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-img {
  z-index: 1;
}
/* SECTION 2 --------------------------------------------------------------------*/
.about-div {
  padding: 20px;
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: #383237;
}
.header-div {

  padding-left: 80px;
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.vertical-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.vertical-paragraphs {
  padding-right: 80px;
  width: 120px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;  
}

/* SECTION 3 --------------------------------------------------------------------*/

.section-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.leftbox1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2D282C;
}
.imageleft {
  width: 400px;
}

/* SECTION 4 --------------------------------------------------------------------*/

.section-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.rightbox2 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3A3539;
}
.paragraphs-4 {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 400px;
}

/* SECTION 5 --------------------------------------------------------------------*/

.headings-2 {
  padding: 20px;
  padding-top: 80px;
  padding-bottom: 80px;

  font-family: 'Bricolage Grotesque';
  font-weight: bolder;
  font-size: 30pt;

  display: flex;
  justify-content: center;
  align-items: center;

  text-align-last: center;
}

/* SECTION 6 --------------------------------------------------------------------*/

.section-6 {
  background-color: #3A3539;
}

/* FOOTER SECTION --------------------------------------------------------------------*/

.footer-section {
  padding: 40px;
  background-color: #2D282C;
}

.footer-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer-headings {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Space Grotesk';
}

.details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}

.cont-header {
  color: teal;
}

@media only screen and (max-width: 700px) {
  .about-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: auto;
  }
  .logoheader {
    position: absolute;
    top: 30px;
    left: 30px;
    height: 30px;
    width: auto;
    z-index: 3;
  }

.header-div {
  padding-left: 0;
  padding-bottom: 20px;
}
  .vertical-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-content: center;
  }
  .vertical-paragraphs {
    padding-right: 0;
    width: auto;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
    text-align: center;
  }

  .about-paragraph {
  text-align: center;
  }


  .headings {
    font-family: 'Bricolage Grotesque';
    font-weight: bolder;
    font-size: 20pt;
  }

  .subheadings {
    font-family: 'Space Grotesk';
    font-weight: normal;
    font-size: small;
  }

/* ---------------------section 4------------------ */
.section-4 {
  display: flex;
  flex-direction: column;
}
.rightbox2 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3A3539;
}
.paragraphs-4 {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 400px;
}

/* section 5 --------------------------------------------- */
.headings-2 {
  padding: 20px;
  padding-top: 40px;
  padding-bottom: 40px;
  font-family: 'Bricolage Grotesque';
  font-weight: bolder;
  font-size: 20pt;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-align-last: center;
}

}