@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Poor+Story&family=Quicksand:wght@400;700&family=Roboto+Mono:wght@400;700&family=Roboto+Slab:wght@400;700;900&display=swap');

:root {
  --f : "Montserrat";
  --b : "Montserrat";
  --y : #FADC3C;
  --b : #5678FF;
}

::-webkit-scrollbar {
  background-color : #91A7FF;
}

::-webkit-scrollbar-thumb {
  background-color : var(--b);
}

* {
  font-family : var(--f);
  font-size : 18px;
}

body {
  background-color : #f5f5f5;
  padding : 0;
  margin : 0;
}

#nav {
  width : 90%;
  display : flex;
  align-items : center;
  justify-content : space-around;
  flex-direction : row;
  position : absolute;
  left : 5%;
  top : 2%;
  padding : 20px;
}

#nav > *, nav > * > * {
  color : white;
  font-weight : bold;
  font-size : 22px;
}

header {
  height : 100vh;
  width : 100%;
  background-image : url("images/header.jpg");
  background-size : cover;
  background-repeat : no-repeat;
  background-position : center;
  display : flex;
  align-items : flex-start;
  justify-content : center;
  flex-direction : column;
  padding : 0;
  margin : 0;
}

header > * {
  color : white;
  width : 50%;
  position : relative;
  left : 10%;
}

#logo {
  height : 100px;
  width : auto;
}

h1 {
  font-size : 30px;
}

h2 {
  font-size : 24px;
  font-weight : 900;
  color : black;
}

header > p {
  font-size : 24px;
}

nav > a > button {
  border-radius : 50px;
  background-color : var(--b);
  border : 0;
  color : white;
  padding : 15px 25px;
  font-weight : 900;
}

.button-container {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : flex-start;
}

.button-container > * {
  margin-right : 20px;
}

button {
  font-weight : 900;
  cursor : pointer;
}

.empty-button {
  color : white;
  background-color : transparent;
  border : 0;
}

.full-button {
  padding : 10px 20px;
  border : 0;
  color : white;
}

.black {
  background-color : #171717;
}

.yellow {
  background-color : var(--y);
}

.blue {
  background-color : var(--b);
}

section {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  padding : 50px 0;
  margin : 0;
}

#stats {
  width : 100%;
  display : flex;
  align-items : center;
  justify-items : center;
  flex-direction : row;
}

#stats > .stat {
  width : calc(100%/3);
  height : 30vh;
  display : flex;
  align-items : center!important;
  justify-content : center!important;
  flex-direction : row;
}

#stats > .stat > * {
  color : white;
  font-weight: 900;
  text-align : center;
  width : auto;
}

.stat > p:first-child {
  font-size : 60px!important;
}

.stat > p:nth-child(2) {
  font-size : 26px;
  text-align : left!important;
  margin : 0 0 0 20px;
  text-transform : uppercase;
}


.flex-section {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
}

.flex-section > * {
  width : 35%;
  display : flex;
  flex-direction : column;
  align-items : flex-start;
  justify-content : center;
}

.flex-section > div > img {
  width : 90%;
  height : auto;
}

#quote-section {
  width : 50%;
  padding : 20px;
  background-color : white;
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : space-around;
  flex-wrap : wrap;
  position : relative;
  left : 25%;
  margin : 0;
  top : -50px;
  border-bottom : 5px solid var(--y);
}
#quote-section > h2 {
  text-align : left;
  width : 90%;
  font-weight : 900;
}

#quote-form {
  background-color : white;
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : space-around;
  flex-wrap : wrap;
  position : relative;
}

#quote-form > button {
  width : 30%;
  position : relative;
  right : -31%;
  margin : 10px;
}

.small-caps-header {
  text-transform : uppercase;
  font-size : 18px;
  font-weight : 900;
  color : var(--b);
  margin : 2px 0;
}

.small-caps-header.section {
  font-size : 24px!important;
}

.big-header.section {
  text-align : center!important;
  text-transform : uppercase!important;
}

.big-header {
  font-weight : 900;
  font-size : 22px;
  margin : 5px 0;
  color : black;
  width : 80%;
}

label {
  color : black!important;
}

form > span {
  display : flex;
  flex-direction : column;
  align-items : flex-start;
  justify-content : flex-start;
  width : 40%;
  margin : 10px 0;
}

form > span > input {
  width : 100%;
  margin : 0;
  padding : 5px;
  background-color : #EFEFEF;
  border : 0;
}

#testimonials, #solar-installations {
  width : 100%;
  padding : 50px 0;
  background-image : url('images/testimonial-background.png');
  background-size : cover;
  background-repeat : no-repeat;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  }

  #solar-installations > h2 {
    color : white;
    margin : 0;
  }

  .service-card > span > * {
    margin : 2px 0!important;
  }

  #faq {
    flex-direction : row-reverse;
  }

  #faq > div {
    margin : 0 20px;
  }

  .service-card {
    background-color : white;
    display : flex;
    align-items : center;
    justify-content : center;
    flex-direction : row;
    padding : 20px;
    width : 60%;
    margin : 25px;
    position : relative;
  }

  .service-card > a {
    position : absolute;
    right : 20px;
    bottom : -15px;
  }

  .service-card > a > button {
    border-radius : 50px;
  }

  .service-card > img {
    height : 20vh;
    width : 20vh;
  }

  .service-card > span {
    display : flex;
    align-items : flex-start;
    justify-content : center;
    flex-direction : column;
  }

  .service-card > span > * {
    text-align : left;
  }

#products {
  width : 70%;
  padding : 20px;
  background-color : white;
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  position : relative;
  left : 15%;
  margin : 0;
  top : -50px;
}

  #testimonials > h2 {
    color : white;
    margin : 0 0 30px 0;
    padding : 0;
  }

  #testimonial-container, #supplier-container, #product-container {
    width : 65%;
    display : grid;
    grid-auto-flow : column;
    grid-auto-columns : calc((100%/3)-20px);
    gap : 50px;
    overflow-x : auto;
    overflow-y: hidden;
    scroll-snap-type : x mandatory;
    scroll-behavior : smooth;
    scrollbar-width : 0;
  }

  #product-container {
    width : 80%;
    grid-auto-columns : calc((100%/14)-20px);
    gap : 50px;
  }

  #testimonial-container::-webkit-scrollbar, #supplier-container::-webkit-scrollbar, #product-container::-webkit-scrollbar {
    display : none;
  }

  .product-logo {
    width : 16vw;
    height : 100%;
    object-fit : contain;
    object-position : center;
    margin : 0;
  }

  .testimonial-card {
    padding : 50px 50px 80px 50px;
      width: 57vw!important;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : center;
    background-color: white;
    position : relative;
    scroll-snap-align : start;
    flex: 0 0 auto; /* Set flex-shrink to 0 to prevent squishing */
    margin : 0!important;
  }

  header > .button-container > a > button {
    font-size : 22px;
  }

  .testimonial-card > img {
    width : 20%;
    height : auto;
    padding : 0;
    margin : 0;
    left : 40%;
    position : relative;
  }

  #testimonials > #right, #testimonials > #left {
    background-color : transparent;
    color : white;
    border : 0;
    font-size : 80px;
    font-family : arial;
    position : absolute;
    z-index : 99;
    font-weight : normal;
    font-family : 'Poor Story';
  }

  #products > #left, #products > #right {
    background-color : transparent;
    color : black;
    border : 0;
    font-size : 50px;
    font-family : arial;
    position : absolute;
    z-index : 99;
    font-weight : normal;
    font-family : 'Poor Story';
  }

  #products > #left {
    left : 2vw;
  }

  #products > #right {
    right : 2vw;
  }

  #left {
    left : 5vw;
  }

  #right {
    right : 5vw;
  }

  .testimonial-name {
    font-weight : 900;
    position : absolute;
    right : 50px;
    bottom : 30px;
    text-transform: uppercase;
  }

  #gallery > div {
    display : flex;
    flex-direction: row;
    align-items : center;
    justify-content : center;
    flex-wrap: wrap;
    width : 90%;
  }

  #gallery > div > img {
    width : 20vw;
    height : 20vw;
    margin : 20px;
    padding : 0;
    object-fit: cover;
    background-color : #F5F5F5;
  }

  #certified {
    background-color : white;
    padding : 0px 0 20px 0;
  }

#certified > img {
  width : 30%;
}

/* Footer */

footer {
  width : 100%;
  height : auto;
  padding : 50px 0;
  background-color : var(--b);
  display : flex;
  align-items : center;
  justify-content : center;
  flex-direction : column;
}

footer > #top-pane {
  display : flex;
  align-items : center;
  justify-content : space-between;
  flex-direction : row;
  width : 90%;
  height : 50vh;
}

footer > #top-pane > * {
  display : flex;
  align-items : flex-start;
  justify-content : flex-start;
  flex-direction : column;
  height : 100%;

}

#top-pane > nav > a > p {
  font-family : var(--b);
  font-size : 18px;
  color : white!important;
  text-decoration : none;
  font-weight : bold;
  padding : 5px 0;
  margin : 0!important;
}

h3 {
  color : white;
  font-size : 22px;
}

a {
  text-decoration : none;
}

.footer-contact-container {
  display : flex;
  align-items : center;
  justify-content : flex-start;
  flex-direction : row;
}

.footer-contact-container > * {
  color : white;
  fill : white!important;
  font-size : 20px;
  font-family : var(--b);
  font-weight : bold;
}

.footer-contact-container > svg {
  width : 30px;
  height : 30px;
}

h4 {
  color : var(--y);
}

label {
  background-color : rgb(0,0,0,0);
  font-size : 20px;
  color : white;
  font-family : var(--b);
}

#message-form {
  display : flex;
  flex-direction : row!important;
  align-items : center;
  justify-content : flex-end!important;
  flex-wrap : wrap;
  width : 35vw;
}

#message-form > span {
  width : 45%;
  margin : 5px;
}

#message-form  > span > input {
  padding : 5px;
  margin : 0;
  width : 98%;
  background-color : #91A7FF;
}

#message-form > span > label {
  color : white!important;
  font-size : 18px;
  font-weight : bold;
}

#message-form > button {
  width : 45%;
  margin : 5px;
}

#top-pane > form {
  flex-wrap : wrap;
  justify-content : space-between;
  height : 25vh;
}
#message-container {
  height : 100%;
  width : 20vw;
  display : flex;
  align-items : center;
  flex-direction : column;
  justify-content : space-between;
  margin-left : 10px;
}

#message-container > label {
  width : 100%;
  text-align : left;
}

.footer-banana-button {
  width : 40%;
  height : auto;
}

textarea {
  resize: none;
  height : 50%;
  width : 100%;
  font-size : 20px;
  font-family : var(--b);
}

#bottom-pane {
  display : flex;
  align-items : center;
  justify-content : center;
  flex-direction : column;
  width : 80%;
}

#bottom-pane > span {
  width : 100%;
  margin : 50px 0 0 0;
  display : flex;
  align-items : center;
  justify-content : space-between;
  flex-direction : row;
}

#bottom-pane > hr {
  width : 90%;
  border-top : 3px solid white;
}

#bottom-pane > span > label {
  color : white!important;
  font-weight : bold;
}

label > a {
  font-family: inherit;
  font-size : inherit;
  color : inherit;
  text-decoration : underline;
}

#top-pane > form > input, #top-pane > form > span > textarea {
  background-color : #EDEDED;
  border-bottom : 3px solid white;
  border-top : 0;
  border-left : 0;
  border-right : 0;
  color : white;
}

input {
  font-family : var(--b);
}

#hamburgerButton {
  display : none;
  position : absolute;
}

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

  body {
    background-color : white;
  }

  #hamburgerButton {
    display : block;
    background-color: transparent;
    width : 50px;
    font-size : 40px;
    height : 50px;
    right : 10px;
    top : 10px;
    z-index : 99;
    color : var(--y);
    border : 0;
  }

   #nav {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : space-around;
    width : 100%;
    height : 80vh;
    padding : 0;
    position : absolute;
    top : 0;
    left : -100%;
    z-index : 95;
    background-color : white;
    transition-duration : 0.7s;
    padding : 50px 0;
  }

  #nav > * > p {
    color : black;
    margin : 0;
  }

  header > .button-container {
    justify-content : flex-start;
    align-items : flex-start;
  }

  .button-container {
    flex-direction : column;
    justify-content : center;
  }

  #logo {
    width : 70%;
    height : auto;
  }

  header {
    height : 90vh;
  }

  header > * {
    color : white;
    width : 90%;
    position : relative;
    left : 5%;
  }

  header > p {
    font-size : 20px;
  }

  #quote-section {
    width : 100%;
    padding : 20px;
    position : relative;
    left : 0;
    margin : 0;
    top : 0;
    border : 0;
    margin : 0;
    padding : 20px 0;
  }
  #quote-section > h2 {
    text-align : center;
    width : 90%;
    font-weight : 900;
  }

  #quote-form {
    flex-direction : column;
    flex-wrap : nowrap;
    width : 90%;
    left : 0;
    margin : 0;
    padding : 0;
  }

  #quote-form > button {
    width : 80%;
    position : relative;
    right : 0;
    margin : 10px;
  }

  form > span {
    width : 90%;
    margin : 10px 0;
  }

  .flex-section {
    flex-direction : column;
    padding : 0;
  }

  .flex-section > * {
    width : 90%;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : center;
  }

  .flex-section > div > img {
    width : 100%;
    height : auto;
    margin : 20px 0;
  }

  section {
    padding : 20px 0!important;
  }

  #testimonial-container, #supplier-container, #product-container {
    width : 90%;
    display : grid;
    grid-auto-flow : column;
    grid-auto-columns : calc((100%/3)-20px);
    gap : 50px;
    overflow-x : auto;
    overflow-y: hidden;
    scroll-snap-type : x mandatory;
    scroll-behavior : smooth;
    scrollbar-width : 0;
  }

  #product-container {
    width : 80%;
    grid-auto-columns : calc((100%/14)-20px);
    gap : 50px;
  }

  .product-logo {
    width : 80vw;
    height : 100%;
    object-fit : contain;
    object-position : center;
    margin : 0;
  }

  .testimonial-card {
    padding : 30px 20px 30px 20px;
    width: 80vw!important;
  }

  .testimonial-card > p {
    font-size : 16px;
  }


  .testimonial-card > img {
    width : 60%;
    height : auto;
    padding : 0;
    margin : 0;
    left : 20%;
    position : relative;
  }

  #testimonials > #right, #testimonials > #left {
    display : none;
  }

  #products > #left, #products > #right {
    display : none;
  }

  #products {
    width : 100%;
    padding : 20px 0;
    background-color : white;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    position : relative;
    left : 0;
    margin : 0;
    top : 0;
  }

  .testimonial-name {
    bottom : 10px;
  }

  #gallery > div {
    display : flex;
    flex-direction: row;
    align-items : center;
    justify-content : center;
    flex-wrap: wrap;
    width : 90%;
  }

  #gallery > div > img {
    width : 90vw;
    height : 90vw;
    margin : 10px 0;
    padding : 0;
    object-fit: cover;
    background-color : #F5F5F5;
  }

  .service-card {
    background-color : white;
    display : flex;
    align-items : center;
    justify-content : center;
    flex-direction : column;
    padding : 20px;
    width : 80%;
    margin : 50px 0;
    padding : 20px;
    position : relative;
  }

  .service-card > * {
    margin : 8px;
  }

  .service-card > a {
    position : relative;
    right : 0;
    bottom : 0;
  }

  .service-card > a > button {
    border-radius : 0;
  }

  .service-card > img {
    height : 20vh;
    width : 20vh;
  }

  .service-card > span {
    display : flex;
    align-items : flex-start;
    justify-content : center;
    flex-direction : column;
  }

  .service-card > span > * {
    text-align : left;
  }

  #faq {
    flex-direction : column;
  }

  #faq > div {
    margin : 0 20px;
  }

  #stats {
    width : 100%;
    display : flex;
    align-items : center;
    justify-items : center;
    flex-direction : column;
  }

  #stats > .stat {
    width : 100%;
    height : 33vh;
    display : flex;
    align-items : center!important;
    justify-content : center!important;
    flex-direction : row;
  }

  #stats > .stat > * {
    color : white;
    font-weight: 900;
    text-align : center;
    width : auto;
  }

  .stat > p:first-child {
    font-size : 60px!important;
  }

  .stat > p:nth-child(2) {
    font-size : 26px;
    text-align : left!important;
    margin : 0 0 0 20px;
    text-transform : uppercase;
  }
  /* Footer */

  #certified > img {
    width : 80%;
  }

  footer {
    width : 100%;
    height : auto;
    padding : 50px 0;
    display : flex;
    align-items : center;
    justify-content : center;
    flex-direction : column;
  }

  footer > #top-pane {
    flex-direction : column;
    width : 90%;
    height : auto;
  }

  footer > #top-pane > * {
    display : flex;
    align-items : flex-start;
    justify-content : flex-start;
    flex-direction : column;
    width : 90%;
    flex-wrap : wrap;
    height : 100%;
    margin-top : 20px;
  }

  #top-pane > nav > a > p {
    font-family : var(--b);
    font-size : 18px;
    padding : 0;
    margin : 10px 0;
  }

  .footer-contact-container {
    display : flex;
    align-items : flex-start;
    justify-content : flex-start;
    flex-direction : row;
    margin : 10px 0;
  }

  .footer-contact-container > * {
    font-size : 18px;
    margin : 0;
  }

  .footer-contact-container > svg {
    width : 30px;
    height : 30px;
  }

  h4 {
    color : var(--yellow);
  }

  label {
    background-color : rgb(0,0,0,0);
    font-size : 18px;
    font-family : var(--b);
    margin : 0;
    line-height: normal;
    text-align : center;
  }

  #message-container {
    height : 100%;
    width : 100%;
    display : flex;
    align-items : center;
    flex-direction : column;
    justify-content : space-between;
    margin-left : 0;
  }

  #message-container > label {
    width : 100%;
    text-align : left;
  }

  .footer-banana-button {
    width : 40%;
    height : auto;
  }

  textarea {
    resize: none;
    height : 30vh;
    width : 100%;
    font-size :20px;
    font-family : var(--b);
    margin : 0 0 10px 0;
  }

  #bottom-pane {
    display : flex;
    align-items : center;
    justify-content : center;
    flex-direction : column;
    width : 90%;
  }

  #bottom-pane > span {
    width : 100%;
    margin : 50px 0 0 0;
    display : flex;
    align-items : center;
    justify-content : space-between;
    flex-direction : column;
  }

  #bottom-pane > hr {
    width : 80%;
    border-top : 2px solid white;
    margin : 50px 0 0 0;
  }

  label > a {
    font-family: inherit;
    font-size : inherit;
    color : inherit;
    text-decoration : underline;
  }

  #top-pane > form > input, #top-pane > form > span > textarea {
    background-color : #EDEDED;
    border-bottom : 3px solid white;
    border-top : 0;
    border-left : 0;
    border-right : 0;
  }

  span {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : space-between;
    padding : 0;
    margin : 0;
  }

  span > a > button {
    margin : 10px 0;
  }

  #message-form {
    display : flex;
    flex-direction : column!important;
    align-items : center;
    justify-content : center!important;
    flex-wrap : wrap;
    width : 90%;
  }

  #message-form > span {
    width : 90%;
    margin : 5px;
  }

  #message-form  > span > input {
    padding : 5px;
    margin : 0;
    width : 98%;
    background-color : #91A7FF;
  }

  #message-form > span > label {
    color : white!important;
    font-size : 18px;
    font-weight : bold;
  }

  #message-form > button {
    width : 90%;
    margin : 5px;
  }

  nav > a > button {
    border-radius : 50px;
    background-color : var(--b);
    border : 0;
    color : white;
    padding : 15px 25px;
    font-weight : 900;
    font-size : 20px;
  }

}