@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Oswald:wght@300;400;500&display=swap");

:root {
  /* Colours */

  --colour-background-dark: #544d47;
  --colour-background-medium: #aed1cb;
  --colour-background-medium-light: #f9ffff;
  --colour-background-light: #fff;
  --colour-background-footer: #d16c1e;

  --colour-nav-hover: #09a087;

  --colour-button: #b8b8b8;
  --colour-button-text: #000;
  --colour-button-hover: #20dabe;
  --colour-button-hover-text: rgb(255, 255, 255);

  /* Fonts  */

  --font-family-body: "Open Sans", sans-serif;
  --font-family-heading: "Oswald", sans-serif;

  --font-size-navbar: 1.5rem;

  --font-size-medium: 1.1rem;
  --font-size-large: 1.3rem;
  --font-size-extra-large: 1.8rem;
  --font-size-jumbo: 3rem;

  /* Spacing */

  --line-height-medium: 1.7rem;

  --letter-spacing-paragraph: 0.03rem;

  --spacing-small: 0.75rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-extra-large: 2rem;
}

html {
  box-sizing: border-box;
  font-family: "Oswald", "Open Sans", sans-serif;
  height: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  min-height: 100vh;
  background-image: url(../images/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--colour-background-dark);
  line-height: var(--line-height-medium);
  font-family: var(--font-family-body);
  font-size: var(--font-size-medium);
  letter-spacing: var(--letter-spacing-paragraph);
}

h1,
h2,
h3 {
  font-family: var(--font-family-heading);
}

.page-wrapper-outside {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0rem 2rem 0rem;
  max-width: 50vw;
  margin: auto;
}

.page-wrapper-inside {
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.5);
  background-color: var(--colour-background-light);
  border-radius: var(--spacing-medium);
}

/* NavBar Code */

.nav-list {
  padding: 1rem 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-item {
  list-style: none;
  margin-right: 2rem;
}

.nav-item a {
  text-decoration: none;
  color: black;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-navbar);
  transition: all 200ms ease-in;
}

.nav-item a:hover {
  color: var(--colour-nav-hover);
}

/* Align logo to the left */
.nav-item:first-child {
  margin-right: auto;
  padding: 0 1rem;
}

.logo {
  min-width: 5rem;
}

.header {
  background-color: #be845e;
}

/* Set the banner image under the Nav bar */
.hero-image {
  min-width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Main Content */

.section-1 {
  padding: 0rem 2.5rem;
}

.section-1 h2 {
  border-bottom: 0.1rem solid #d3d3d3;
  box-shadow: 0 0.1rem 0 #a3a3a3;
  margin: 2.2rem 0rem 1rem 0rem;
  padding-bottom: 0.8rem;
  font-size: var(--font-size-extra-large);
  color: #000;
}

p {
  padding: 0 0 1rem 0;
}

/* Format images in the main content */

.main-content-image {
  float: right;
  margin: 1rem 0rem 1rem 1rem;
}

.main-content-image img {
  border-radius: 1rem 1rem 1rem 1rem;
  width: 100%;
}

/* Clear Fix for Floats */

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* Cards */

.card-container {
  max-width: 100%;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: center;
  justify-content: center;
}

.card {
  margin: 0.9rem;
  min-height: 12rem;
  max-width: 75rem;
  border: 0.1rem solid #aed1cb;
  border-left: 1rem solid #aed1cb;
  flex: 1 1 auto;
  display: flex;
  background-color: var(--colour-background-medium-light);
  margin: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.card img {
  float: left;
  max-height: 15rem;
  max-width: 15rem;
  flex: 1 1 auto;
  margin: 0 1rem 0.6rem 0;
}

.card-body {
  width: 12rem;
  max-height: 100%;
  flex: 1 1 auto;
  display: flex;
  margin: 1.8rem;
  flex-flow: column nowrap;
  justify-content: flex-start;
  padding: 0.8rem;
}

.card-text {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0 0;
  padding: 0;
  font-size: var(--font-size-medium);
}

/* Button Back to Top*/

.button-back-to-top {
  text-align: center;
}

.myBtn {
  border: 0.1rem solid var(--colour-button);
  color: var(--colour-button-text);
  cursor: pointer;
  padding: 0.5rem 2rem;
  margin: 2rem;
  border-radius: 2rem;
  font-size: var(--font-size-large);
}

.myBtn:hover {
  background-color: var(--colour-button-hover);
  color: var(--colour-button-hover-text);
}

/* Feedback Form */

.form-element-align-center {
  text-align: center;
}

.contact-form {
  background-color: var(--colour-background-medium);
  padding: 1.5rem 1.5rem;
  margin: 2.5rem 2.5rem;
  border-radius: 1rem 1rem 1rem 1rem;
  font-size: var(--font-size-large);
  color: #131212;
}

.contact-form label {
  display: block;
  margin-top: 1rem;
}

.contact-form input {
  display: block;
  width: 100%;
  padding-left: 1rem;
  font-size: var(--font-size-large);
}

.contact-form textarea {
  display: block;
  width: 100%;
  padding-left: 1rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-large);
}

.form-col {
  width: 100%;
  border-radius: var(--spacing-medium);
  margin-top: 1.5em;
  text-align: center;
}

.form-col .label-query {
  display: inline-block;
  margin: 0;
}

/* Left Spacing before label General Enquiry */
.form-col .label-query:nth-child(3) {
  margin-left: 1.5rem;
}

.contact-form input[type="checkbox"] {
  display: inline-block;
  width: auto;
}

/* Feedback Form Submit Button */

.btn-feedback {
  border: 0.1rem solid var(--colour-button);
  font-size: var(--font-size-large);
  color: var(--colour-button-text);
  cursor: pointer;
  padding: 1rem 5rem;
  margin: 2rem;
}

.btn-feedback:hover {
  background-color: var(--colour-button-hover);
  color: var(--colour-button-hover-text);
}

/* Footer */

footer {
  background-color: var(--colour-background-footer);
  color: #fff;
  padding: 2.5rem;
  border-radius: 0rem 0rem 1rem 1rem;
  text-align: left;
  margin-top: 1.7rem;
}

/* Media Queries - For Responsiveness */

/* Media Query 1 - Pixels - 600px */
@media screen and (max-width: 37.5em) {
  .page-wrapper-outside {
    max-width: 100vw;
    margin: 0;
    padding: 0;
  }

  .section-1 h2 {
    border-bottom: 0.1rem solid #908f8f;
    box-shadow: none;
    margin: 0.8em 0rem 0.8em 0rem;
    padding-bottom: 0.2em;
    font-size: 1.5em;
  }

  p {
    letter-spacing: 0.01em;
  }

  .logo {
    display: none;
  }

  .nav-list {
    padding: 0.5em 0;
  }

  .nav-item {
    list-style: none;
    margin-right: 1.5em;
  }

  .nav-item a {
    font-size: 1.4em;
  }

  .main-content-image {
    width: 50%;
  }
}

/* Media Query 2 - Pixels - 768px and 1024px - Tablet */
/* Changed min-width from 48em so it would smoothly transition to the max-width: 37.5em breakpoint  */

@media (min-width: 37.5em) and (max-width: 64em) {
  .page-wrapper-outside {
    max-width: 100vw;
    margin: 0;
    padding: 0;
  }

  .page-wrapper-inside {
    margin: 0;
  }

  .section-1 h2 {
    border-bottom: 0.1rem solid #908f8f;
    box-shadow: none;
    margin: 0.8em 0rem 0.8em 0rem;
    padding-bottom: 0.2em;
    font-size: 1.6em;
  }

  .nav-list {
    padding: 0.5em 0;
  }

  .nav-item {
    list-style: none;
    margin-right: 1.5em;
  }

  .nav-item a {
    font-size: 1.4em;
  }

  .main-content-image {
    width: 30%;
  }
}