nav {
  position : absolute;
  left : 5%;
  top : 20px;
  z-index : 99;
  background-color : white!important;
  width : 90%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

header {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : flex-start;
  height : 100vh;
  position : relative;
  z-index : 95;
  margin : 0!important;
  background-image : url('../images/header.png');
  background-size : cover;
  background-repeat : no-repeat;
}

footer {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

header > * {
  width : 40%;
  color : white!important;
  //text-shadow: rgba(0, 0, 0, 0.9) 0px 5px 15px;
}

header > img {
  height : 100%;
  width : auto;
  position : absolute;
  top : 0;
  right : 0;
}

header > div {
  width : 50%;
  position : relative;
  left : 10%;
  top : 5%;
}

header > div > h1 {
  font-family : var(--themeFont);
  font-weight : 800;
  font-size : 30px;
  color : white!important;
  text-transform : uppercase;
}

header > div > h2 {
  color : var(--themecolor)!important;
  font-size : 24px!important;
  color : white!important
}

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

header > div > * {
  margin : 20px 0;
  //text-shadow: rgba(0, 0, 0, 0.9) 0px 5px 15px;
}

#products {
  background-color : white;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
}

#services > .flex-container, #products > .flex-container {
  justify-content: center; /* Align items to the start for better scrolling */
  margin: 20px 0;
  width: 90%; /* Adjust width to use full container width */
  display: flex; /* Use flexbox for layout */
  padding : 30px;
  flex-wrap : wrap;
}

#services > .flex-container > *, #products > .flex-container > * {
  flex: 0 0 auto; /* Ensure child elements do not shrink or grow */
  margin-right: 20px; /* Add space between cards */
}


#services {
  background-color : var(--themecolor);
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
}

#products > h2 {
  color : var(--themeFont);
}

.product-card, .service-card {
  position : relative;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  width : 26vw;
  height : auto;
  border : 0;
  margin : 5px 20px;
  padding : 10px;
  white-space: normal;
}

.product-card > img {
  width : 100%;
  height : auto;

}

.product-card > h4 {
  text-transform : uppercase;
  text-align : left;
}

.product-card > p {
  text-align : left;

}

.product-card > * {
  width : 95%;
}

.service-card {
  overflow : hidden;
}

.product-header {
  height : 30%;
  width : 100%;
  background-color : var(--lightgrey);
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : flex-start;
  position : relative;
  top : 0;
  left : 0;
  border-top-left-radius : 30px;
  border-top-right-radius : 30px;
}

.service-header {
  height : 30%;
  width : 100%;
  background-color : var(--lightgrey);
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  position : absolute;
  top : 0;
  left : 0;
  border-top-left-radius : 30px;
  border-top-right-radius : 30px;
  margin : 0;
}

.product-header > h4  {
  font-family : var(--themeFont);
  font-weight : 900;
  margin : 30px;
  text-transform : uppercase;
  text-align : left;
}

.service-header > h4 {
  font-family : var(--themeFont);
  font-weight : 900;
}

.product-header > a > button {
  width : 25px;
  height : 25px;
  font-size : 20px;
  margin : 0;
  background-color : #D9D9D9;
  border : 0;
  position : relative;
}

.product-header > a > button:hover {
  color : black;
}

.pointer {
  height : 15px;
  width : 15px;
  margin-top : 4px;
  padding : 0;
  fill : black;
}

.product-desc  {
  width : 100%;
  height : 60%;
  background-color : white;
  display : flex;
  align-items : center;
  justify-content : flex-start;
  overflow : hidden;
  position : relative;
  top : 5%;
  font-size : 16px;
}

.service-desc {
  width : 100%;
  height : 70%;
  background-color : white;
  display : flex;
  align-items : center;
  justify-content : center;
  position : relative;
  top : 15%;
  text-align : left;
  font-size : 16px;
}

.service-desc > p {
  width : 50%;
}

.service-desc > img {
  width : 30%;
  height : auto;
}

.product-desc > img {
  width : 48%;
  position : absolute;
  right : -15%;
}

.product-desc > p {
  text-align : left;
  width : 60%;
  padding : 20px;
}

.product-card > a {
  position : relative;
  bottom : -10%;
}

#insurance-made-easy {
  height : auto;
  padding : 50px 0;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
}

#insurance-made-easy > .flex-container {
  display : flex;
  flex-direction : row-reverse;
  align-items : center;
  justify-content : center;
  margin : 0;
  padding : 0;
}


#insurance-made-easy > .flex-container > div {
  display : flex;
  flex-direction : column;
  align-items : flex-end;
  justify-content : space-between;
  text-align : left;
  width : 30vw;
  height : auto;
}

#insurance-made-easy > .flex-container > div > * {
  width : 100%;
  margin : 10px 0;
}

#insurance-made-easy > .flex-container > img {
    width : 50vh;
    height : 50vh;
    margin : 20px 50px 20px 0;
    object-fit : contain;
  }

  #insurance-made-easy > .flex-container > div > p {
    font-size : 20px;
  }

  .greyButton {
    background-color : var(--grey);
    border : 4px solid var(--grey);
    color : white;
  }

  .greyButton:hover {
    background-color : #3C3C3C;
    border : 4px solid #3C3C3C;
    color : white;
  }

  #why-choose-us {
    display : flex;
    flex-direction : row-reverse;
    align-items : center;
    justify-content : center;
    padding : 50px 0;
  }

  .full-img {
    width : 100%;
    margin : 10px 0;
    object-fit : cover;
    height : auto;
  }

  #why-choose-us > #description-div {
    width : 40%;
    height : auto;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : flex-start;
  }

  hr {
    border : 3px solid var(--themecolor);
    width : 90%;
  }

  #why-choose-us > img {
    width : 35%;
    height : auto;
    margin : 0 50px 0 0;
  }

  #why-choose-us > #description-div > * {
    width : 100%;
    text-align : left;
    margin : 10px 0;
  }

  #why-choose-us > #description-div > p {
    font-size : 20px;
    margin : 5px 0;
  }

  @media screen and (max-width: 980px) {
    header {
      flex-direction : column;
      justify-content : center;
      min-height : 90vh;
      max-height : 110vh;
      height : auto;
      top : 0;
      background-color : white;
    }

    header > * {
      width : 100%;
    }

    header > div {
      width : 90%;
      left : 0;
      top : 0;
      padding : 10px 0;
      display : flex;
      flex-direction : column;
      align-items : flex-start;
      justify-content : center;
    }

    header > div > * {
      width : 100%!important;
      max-width :100%!important;
      text-align : left;
      margin : 5px 0;
    }

    header > div > h1 {
      font-size : 28px;
    }

    header > div > h2 {
      font-size : 22px;
    }

    header > img {
      display : none;
    }

    .product-card, .service-card {
      width : 90%;
      margin : 20px 0;
    }

    #insurance-made-easy {
      height : auto;
      margin : 50px 0;
    }

    #insurance-made-easy > h2 {
      width : 90%;
      max-width : 90%;
      text-align : left;
    }

    #insurance-made-easy > .flex-container {
      width : 100%;
    }

    #insurance-made-easy > .flex-container > div {
      align-items : flex-start;
      justify-content : center;
      text-align : left;
      width : 100%;
      height : auto;

    }

    #insurance-made-easy > .flex-container > img {
        display : none;
      }

      #insurance-made-easy > .flex-container > div > p {
        font-size : 20px;
      }

      nav {
        left : -120%;
        width : 100vw;
        height : 100vh;
        top : 0;
        z-index : 96!important;
      }

      .hamburger {
        z-index : 99;
      }

      #why-choose-us {
        display : flex;
        flex-direction : column;
      }

      #why-choose-us > h2 {
        width : 100%;
        left : 0;
      }

      #why-choose-us > #description-div {
        width : 90%;
        height : auto;
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : flex-start;
      }

      #why-choose-us > img {
        display : none;
      }

      #why-choose-us > #description-div > h2 {
        width : 100%!important;
        text-align : left;
        max-width : 100%!important;
        font-size : 24px;
      }

      #why-choose-us > #description-div > * {
        width : 100%;
        text-align : left;
        margin : 10px 0;
      }

      #why-choose-us > #description-div > p {
        font-size : 20px;
        margin : 5px 0;
      }

  }