/*Google Fonts*/
@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap");
/*Asterisk wildcard selector to override default styles added by the browser*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*General styles*/
body {
  display: flex;
  flex-direction: column;
  font-family: "Gabarito", sans-serif;
  /*Generic project styles*/
  background-color: rgb(241, 242, 242);
}

main {
  /*make main element take up any surplus space and pushes footer down.*/
  flex: 1 0 auto;
}

  #breakline {
    width: 50%;
  }

  .wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }

  body h2 {
    margin: 1rem;
  }

  h1 {
    font-family: "Zain", sans-serif;
    color: rgb(100, 83, 128) !important;
    font-size: 40px !important;
    text-align: center;
    font-weight: 700 !important;
    text-transform: capitalize;
  }

  h2,
  h3,
  h4 {
    font-family: "Zain", sans-serif;
    color: rgb(100, 83, 128) !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    text-align: center;
    text-transform: capitalize;
  }

  /* Header */
  header {
    background-color: #ffffff;
    padding: 0 1rem;
    z-index: 99;
    width: 100%;
    box-shadow: 0 2px 2px #3a3a3a;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    height: 150px;
    background-color: white;
    font-family: "Zain", sans-serif;
  }

  /* Logo */

  img {
    height: 150px;
  }

  #menu {
    font-size: 100%;
    letter-spacing: 2px;
    color: rgb(100, 83, 128);
    font-weight: 500;
  }
  #menu > li {
    margin-bottom: 1em;
    list-style-type: none;
  }

  /* Navbar styles with dropdown toggle */
  nav {
    position: absolute;
    background-color: white;
    width: 100%;
    left: 0;
    padding: 0 1rem;
    box-shadow: 0 2px 2px #2a2a2a;
    display: none;
    top: 150px;
    z-index: 1000;
    list-style-type: none;
  }

  /* Nav toggle */
  #nav-toggle:checked ~ nav {
    display: block;
  }
  #nav-toggle {
    display: none;
  }
  .nav-toggle-label {
    font-size: 2rem;
    padding-top: 0.5rem;
  }

  a:link {
    text-decoration: none;
  }
  a:visited {
    text-decoration: none;
  }

  header a {
    color: slategray;
    text-decoration: none;
  }

  /* Main content */

  /*Hero section*/
  .hero {
    height: 600px;
    width: 100%;
    background: url(../images/queenstown-sunset.jpg) no-repeat center center/
      cover;
    position: relative;
  }

  .hero2 {
    height: 600px;
    width: 100%;
    background: url(../images/nz-hills.webp) no-repeat center center/ cover;
    position: relative;
  }
  p {
    font-size: 20px;
    line-height: 1.5;
    margin: 1rem;
    font-family: "Gabarito", sans-serif;
    text-align: left;
    padding: 0.5rem;
    color: rgb(100, 83, 128);
    border-radius: 5%;
    width: 55%;
    display: flex;
    justify-self: center;
  }

  .breakline {
    background-color: rgb(247, 148, 29);
    height: 5px;
    width: 80%;
    display: flex;
    justify-self: center;
    border-radius: 5%;
    opacity: 0.9;
    margin-bottom: 1rem;
  }

  .vicky_potrait img {
    display: flex;
    justify-self: center;
    padding: 1rem;
    height: 600px;
    width: 400px;
    border-radius: 10%;
  }

  section img {
    display: flex;
    justify-self: center;
    height: 550px;
    width: 400px;
    padding: 1rem;
    border-radius: 10%;
  }

  .potrait-2 img {
    display: flex;
    justify-self: center;
    height: 100%;
    width: 100%;
    padding: 1rem;
    border-radius: 10%;
  }

  .self-portrait {
    display: flex;
    justify-self: center;
    height: 550px;
    width: 400px;
    padding: 1rem;
    border-radius: 10%;
  }

  /*approach section*/

  section li {
    font-size: 100%;
    line-height: 1.5;
    margin: 1rem;
    font-family: "Gabarito", sans-serif;
    text-align: left;
    padding: 0.5rem;
    color: rgb(65, 64, 66);
    border-radius: 5%;
    width: 75%;
    display: revert;
    justify-self: center;
    background-color: rgb(255, 230, 203);
  }

  .btn-light {
    background-color: rgb(100, 83, 128) !important;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 5%;
    font-size: 2rem;
    margin: 1rem;
    text-align: center;
    display: flex;
    justify-self: center;
    text-decoration: none;
  }

  a:link {
    text-decoration: none;
    display: flex;
    justify-self: center;
    text-align: center;
    font-size: 20px;
  }

  div > contact-details {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1rem;
    padding: 1rem;
    background-color: rgb(100, 83, 128);
    border-radius: 5%;
  }

  /*Certificate section*/
  #bacp img {
    display: flex;
    justify-content: center;
    height: 150px;
    width: 300px;
    padding: 1rem;
    border-radius: 10%;
    position: relative;
    top: 20px;
  }

  #online-counselling img {
    display: flex;
    justify-self: center;
    height: 600px;
    width: 100%;
    padding: 1rem;
    border-radius: 10%;
  }

  #demetia img {
    display: flex;
    justify-self: center;
    height: 600px;
    width: 100%;
    padding: 1rem;
    border-radius: 10%;
  }

  #domestic-abuse img {
    display: flex;
    justify-self: center;
    height: 700px;
    width: 426px;
    padding: 1rem;
    border-radius: 10%;
  }

  .container {
    display: flex;
  }

  /*Footer section*/

  footer {
    background-color: rgb(255, 230, 203);
    line-height: 40px;
    padding-left: 3px;
    bottom: 0;
    top: 60px;
    border-radius: 3%;
    position: relative;
    text-align: center;
    font-size: 20px;
    margin: 0;
    color: rgb(65, 64, 66);
  }

  #social-networks {
    text-align: center;
    padding: 5px 0;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
  }
  #social-networks i {
    color: rgb(65, 64, 66);
  }
  footer > h3 {
    text-align: center;
    color: #dadff7;
  }

  a.email {
    color: rgb(65, 64, 66);
    text-align: center;
    font-size: 25px;
    font-weight: 500;
  }

  #useful-links {
    text-align: center;
    padding: 3px 0;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
  }

  #useful-links a {
    color: rgb(65, 64, 66);
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
    margin: 1rem;
  }

  /*Contact section*/

  #contact-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1rem;
    padding: 1rem;
    background-color: rgb(255, 230, 203);
    border-radius: 5%;
  }

  form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 80%;
  }
  #form-header P {
    text-align: center;
    font-size: 20px;
    color: rgb(100, 83, 128);
    font-weight: 400;
    margin-bottom: 1rem;
  }

  .col {
    padding: 5px;
    width: 75%;
  }

  label {
    font-size: 20px;
    color: rgb(100, 83, 128);
    font-weight: 600;
  }

  textarea {
    width: 100%;
    height: 200px;
    padding: 10px;
    border-radius: 5%;
    border: 1px solid rgb(100, 83, 128);
  }

  input {
    width: 100%;
    padding: 10px;
    border-radius: 5%;
    border: 1px solid rgb(100, 83, 128);
  }

  .submit-button {
    font-weight: 600;
    width: 50%;
  }

  /** About me section*/
  .about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1rem;
    padding: 1rem;
    border-radius: 5%;
  }

  #values-p {
    background-color: rgb(255, 230, 203);
  }

  #about-info {
    width: 100%;
  }


  /*Privacy Policy section*/

  /*Media Queries*/
  /*Media queries: Tablets and larger (768px and up.)*/
  @media screen and (min-width: 768px) {
    /*Header*/

    /*Logo*/
    img {
      height: 180px;
    }

    header {
      background-color: #ffffff;
      padding: 0 1rem;
      z-index: 99;
      width: 100%;
      box-shadow: 0 2px 2px rgb(100, 83, 128);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      height: 180px;
      background-color: white;
      font-family: "Zain", sans-serif;
    }

    nav {
      position: absolute;
      background-color: white;
      width: 100%;
      left: 0;
      padding: 0 1rem;
      box-shadow: 0 2px 2px rgb(100, 83, 128);
      display: none;
      top: 180px;
      z-index: 1000;
      list-style-type: none;
    }

    #menu a:hover {
      border-bottom: 1px solid rgb(100, 83, 128);
      font-size: 100%;
      letter-spacing: 2px;
      color: rgb(100, 83, 128);
      font-weight: 500;
    }

    /*Main content*/

    /*Home page image*/

    .self-portrait {
      display: flex;
      justify-self: center;
      height: 850px;
      width: 80%;
      padding: 1rem;
      border-radius: 50%;
    }

    /* CTA button */
    .btn-light {
      background-color: rgb(100, 83, 128) !important;
      color: white !important;
      padding: 0.5rem 1rem;
      border-radius: 5%;
      font-size: 25em;
      margin: 1rem;
      text-align: center;
      justify-self: center;
      text-decoration: none;
    }

    a:link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      text-align: center;
      font-size: 25px;
      font-weight: 400;
    }

    a.email {
      color: rgb(65, 64, 66);
      text-align: center;
      font-size: 25px;
      font-weight: 500;
      margin-left: 134px;
    }

    /*Certificate section*/
    #bacp img {
      display: grid;
      justify-self: center;
      height: 200px;
      width: 400px;
      padding: 1rem;
      border-radius: 10%;
    }

    #online-counselling img {
      display: grid;
      justify-self: center;
      height: 600px;
      width: 50%;
      float: right;
      padding: 1rem;
      border-radius: 10%;
    }

    #demetia img {
      display: grid;
      justify-self: center;
      height: 600px;
      width: 50%;
      float: left;
      padding: 1rem;
      border-radius: 10%;
    }

    #domestic-abuse img {
      display: grid;
      justify-self: center;
      height: 700px;
      width: 100%;
      float: right;
      padding: 1rem;
      border-radius: 10%;
    }

    /*hero image*/

    .hero {
      height: 600px;
    }

    /*Vicky's potrait*/
    .vicky_potrait {
      display: flex;
      justify-self: center;
      height: 75%;
      width: 75%;
      border-radius: 5%;
    }

    .potrait-2 img {
      display: flex;
      justify-self: center;
      height: 600px;
      width: 400px;
      border-radius: 10%;
    }

    .container {
      display: grid;
      justify-content: space-between;
      justify-items: center;
      width: 100%;
    }

    footer {
      position: relative;
      top: 60px;
      border-radius: 3%;
    }

    /*Contact section*/

    #contact-form {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 2rem;
      padding: 2rem;
      background-color: rgb(255, 230, 203);
      border-radius: 3%;
    }

    form {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .col {
      padding: 5px;
    }

    label {
      font-size: 20px;
      color: rgb(100, 83, 128);
      font-weight: 600;
      padding-bottom: 1rem;
    }

    textarea {
      width: 100%;
      height: 200px;
      padding: 10px;
      border-radius: 5%;
      border: 1px solid rgb(100, 83, 128);
      padding-bottom: 1rem;
    }

    input {
      width: 100%;
      padding: 10px;
      border-radius: 5%;
      border: 1px solid rgb(100, 83, 128);
    }

    .btn {
      width: 25%;
      height: 50px;
      font-size: 40px;
    }

    .submit-button {
      width: 40%;
      font-weight: 900;
    }
  }

  /*Footer section*/

  /*Media queries: Laptops & Desktops (992px and up.)*/
  @media screen and (min-width: 992px) {
    /*Header*/

    header {
      height: 120px;
    }

    /*Logo*/

    img {
      height: 120px;
    }
    nav {
      display: block;
      position: static;
      box-shadow: none;
      width: fit-content;
      padding-right: 1rem;
      height: 60px;
    }

    #menu {
      display: flex;
      flex-direction: row;
      font-size: 25px;
    }

    #menu > li {
      padding-left: 1rem;
      list-style-type: none;
    }

    .nav-toggle-label {
      display: none;
    }

    a:link {
      font-weight: 500;
    }

    #menu a:hover {
      border-bottom: 1px solid rgb(100, 83, 128);
      color: rgb(247, 148, 29);
    }

    header a {
      color: rgb(100, 83, 128);
      text-decoration: none;
    }

    /*Main content*/
    /*Hero section*/
    .hero {
      height: 600px;
      width: 100%;
      background: url(../images/queenstown-sunset.jpg) no-repeat center center/
        cover;
      position: relative;
    }

    #person-centred {
      width: 50%;
      margin-bottom: 1rem;
      text-align: left !important;
      padding-top: 10px;
      padding-left: 90px;
    }

    .self-portrait {
      display: flex;
      height: 30%;
      width: 30%;
      border-radius: 15%;
      float: right;
      margin-top: 1rem;
      margin-right: 140px;
      padding-top: 50px;
    }

    .portrait-2 img {
      display: flex;
      height: 50%;
      width: 50%;
      border-radius: 5%;
    }

    #person-centred-2 {
      width: 50%;
      width: 50%;
      margin-bottom: 1rem;
    }

    /*CTA button*/
    a:link {
      text-decoration: none;
      display: flex;
      justify-self: center;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
    }

    a.email {
      color: rgb(65, 64, 66);
      text-align: center;
      font-size: 25px;
      font-weight: 500;
      margin-left: 207px;
    }

    .container {
      display: grid;
      justify-content: space-between;
      justify-items: center;
      width: 100%;
    }

    #bacp img {
      display: grid;
      justify-self: center;
      height: 25%;
      width: 25%;
      padding: 1rem;
      border-radius: 10%;
    }

    /*Contact section*/

    #contact-form {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 2rem;
      padding: 2rem;
      background-color: rgb(255, 230, 203);
      border-radius: 3%;
    }

    form {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    #form-header {
      text-align: center;
      font-size: 20px;
      color: rgb(100, 83, 128);
      font-weight: 400;
      margin-bottom: 1rem;
    }

    .col {
      padding: 5px;
      width: 60%;
      display: grid;
      margin: 5px;
    }

    label {
      font-size: 20px;
      color: rgb(100, 83, 128);
      font-weight: 600;
      padding-bottom: 1rem;
    }

    textarea {
      height: 200px;
      padding: 10px;
      border-radius: 5%;
      border: 1px solid rgb(100, 83, 128);
      padding-bottom: 1rem;
    }

    input {
      width: 100%;
      padding: 10px;
      border-radius: 5%;
      border: 1px solid rgb(100, 83, 128);
    }

    .btn {
      width: 25%;
      height: 50px;
      font-size: 20px;
    }

    #submit-button {
      width: 40%;
    }

    #message {
      width: 100%;
    }

    footer {
      position: relative;
      top: 60px;
      border-radius: 3%;
    }

    /*About me section*/

    /*Vicky's potrait*/
    .vicky_potrait {
      height: 800px;
      width: 600px;
      display: flex;
    }

    .about {
      width: 100%;
      display: flex;
      justify-self: center;
    }
  }

  /* End of media queries for laptops & desktops */

/*Media queries for XXXL screens*/
@media screen and (min-width: 1400px) {

  .self-portrait {
    display: flex;
    height: 100%;
    width: 300px;
    padding: 1rem;
    border-radius: 25%;
    float: right;
    margin-top: 1rem;
    margin-right: 300px;
  }

  #contact-form {
    display: flex;
    justify-self: center;
    align-items: center;
    margin: 2rem;
    padding: 2rem;
    background-color: rgb(255, 230, 203);
    border-radius: 3%;
    width: 75%;
  }
  #expect {
    margin-top: 150px;
  }
  a.email {
    color: rgb(65, 64, 66);
    text-align: center;
    font-size: 25px;
    font-weight: 500;
    margin-left: 377px;
  }

  #bacp img {
    display: grid;
    justify-self: center;
    height: 30%;
    width: 30%;
    padding: 1rem;
  }

  footer {
    position: relative;
    top: 60px;
    border-radius: 3%;
  }

/*About me section*/

/*Vicky's potrait*/
.vicky_potrait {
  height: 40%;
  width: 40%;
  display: flex;
}

.portrait-2 img {
  width: 40%;
  height: 40%;
}

a .btn {
  width: 25%;
  display: flex;
  justify-content: center;
}

}