body,h1,h2,h3,h4,h5,h6,p,input,select {font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 300;}
h1,h2,h3,h4,h5,h6,strong {font-weight: 800;}

.hi {color: var(--secondary);}
h2 {font-weight: 300;}
a {color: var(--primary); font-weight: bold; text-decoration: none;}
a:hover {text-decoration: underline;}

.holder {display: flex; flex-direction: column; justify-content: space-evenly; margin: 0 auto; text-align: center; height: 100dvh;}
.main-logo {width: 60vw; align-self: center;}
.holder-main img {width: 50vw; margin-bottom: 2rem;}
.holder a {display: block;}

.banner {height: 100vh; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--primary); color: white;}
.banner-content {margin-bottom: 2rem;}
.banner-main {display: flex; flex-direction: column; row-gap: 2rem;}
.banner-main h1 {font-size: 5rem; font-weight: 300; text-transform: lowercase; margin: 0; line-height: 1;}
.banner-main p {font-size: 1.8rem; line-height: 1.2; text-wrap: balance;}
.anchor-links {display: none; margin: 0 0 3rem 0; justify-content: space-around; gap: 5px; text-align: center; line-height: 1;}
.anchor-links li a {color: white; text-decoration: none; font-size: 0.6rem; padding-bottom: 2px;}
.anchor-links li a:hover {border-bottom: 1px solid var(--secondary);}

.navbar-collapse {flex-grow: 0;}
.navbar-brand>img {width: 200px;}
.navbar-nav {align-items: flex-end;}
.navbar-nav>li>a {font-weight: bold; text-align: right;}
.navbar-nav>li>a:after {content: "."; color: var(--secondary); border: none; margin: 0; vertical-align: baseline;}
.navbar-nav .dropdown-menu[data-bs-popper] {left: auto; right: 0;}
.navbar-nav .dropdown-item {text-align: right;}

.footer {background-color: var(--primary); color: white; padding: 0 0 2rem 0; text-align: center;}
.footer a {color: white;}
.footer-main {border-top: 1px solid white; padding: 2rem 0;}
.footer-logo img {width: 200px; max-width: 100%;}
.footer-copyright p {margin: 0;}
.footer-copyright ul {list-style-type: none; margin: 0; padding: 0;}

a.more-link {text-transform: uppercase; color: var(--primary); font-weight: 500; font-size: 0.8em; letter-spacing: 2px; border-bottom: 1px solid var(--secondary);}
a.more-link:hover {text-decoration: none;}
.section-dark a.more-link,.section-medium a.more-link {color: white;}
.section-medium a.more-link {border-color: white;}

.social-icons {list-style-type: none; display: flex; justify-content: center; gap: 8px; margin-top: 1rem; padding: 0;}
.social-icons img {width: 2rem;}

.section-dark a {color: white;}
.section-medium {background-color: var(--secondary); color: white;}

.section-quote {text-align: center; display: flex; justify-content: center;}
.section-quote blockquote {font-size: 3rem; padding: 10rem 0; margin: 0;}
.section-quote blockquote p {margin: 0;}
.section-quote blockquote p:before {content: '\201C'; color: var(--secondary);}
.section-quote blockquote p:after {content: '\201D'; color: var(--secondary);}

.section h2 {font-weight: 800; margin-bottom: 2rem;}
.dotted:after {content: "."; color: var(--secondary); font-weight: 800;}
.section-medium h2.dotted:after {color: white;}



.form-control {border: 0; border-radius: 0; border-bottom: 1px solid var(--secondary); background-color: transparent; color: inherit;}
label {font-weight: 800;}
.form-control:focus {background-color: transparent; color: inherit;}
.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label {color: inherit;}
.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after {background-color: transparent;}
.form-floating>.form-control:-webkit-autofill~label {color: var(--primary);} 

.form-response-message img {margin-bottom: 2rem; max-height: 2rem;}
.g-recaptcha {display: inline-block;}

.contact-details {font-size: 1.4rem; font-weight: 800; line-height: 1;}
.contact-details>div {display: flex; justify-content: center; align-items: center; margin-bottom: 0.5rem;}
.contact-details img {width: 2rem; margin-right: 5px;}


@media (min-width: 768px) {
  .main-logo {max-width: 20vw; align-self: flex-start;}
  .holder-main img {width: 15vw;}
  .holder a {display: inline;}

  .navbar-brand>img {width: 300px;}

  .banner {height: 90vh;}
  .banner-main {flex-direction: row; column-gap: 10vw; align-items: flex-end;}
  .banner-main>div {flex: 1;}
  .banner-main h1 {font-size: 6rem;}
  .banner-main p {font-size: 2.2rem; max-width: 80%; margin: 0 auto;}
  .banner-lhs img {max-height: calc(90vh - 430px);}


  .contact-details {display: flex; justify-content: center; gap: 1rem;}

  .footer-main,.footer-copyright {display: flex; justify-content: space-between; align-items: center;}

  .footer-copyright ul {display: flex; justify-content: center;}
  .footer-copyright ul li {padding: 0 0.5rem;}
  .footer-copyright ul li:not(:last-child) {border-right: 1px solid var(--secondary);}

  .social-icons {margin: 0;}
}

@media (min-width: 992px) {
  .navbar {padding-top: 2rem;}
  .navbar>.container {align-items: flex-start;}

  .section {display: flex;}
  .section.image-right {flex-direction: row-reverse;}
  .section-image {flex: 2; background-color: grey;}
  .section-text {flex: 3; align-self: center; padding: 0;}
  .section-text>div {width: 70%; margin: 8rem auto;}
  .section-main {padding: 4rem;}
  .section-quote blockquote {width: 50%; margin: 0 auto;}
}

@media (prefers-reduced-motion) {
  .banner-arrow a img {animation: none;}
  .gallery-grid img {opacity: 1;}
  .fade-image {animation: none;}
  .up-link {transform: scale(1);}
}