/* CSS RESET */

*, *:before, *:after {
    box-sizing: border-box;
  }
  
  body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
  }
  
  ol, ul {
    list-style: none;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }


/* BASICS */

:root {
	--primary: 96, 181, 101;
	--secondary: 0, 27, 19;
  --secondary-dark: 0, 15, 11;
  --secondary-mid: 105, 140, 130;
  --secondary-light: 143, 191, 184;
  --accent: 243, 146, 0;
}

@font-face {
  font-family: 'Basier Circle';
  src: url('../fonts/BasierCircle-Regular.woff2') format('woff2'),
      url('../fonts/BasierCircle-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Argesta Headline';
  src: url('../fonts/ArgestaHeadline-Regular.woff2') format('woff2'),
      url('../fonts/ArgestaHeadline-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basier Circle';
  src: url('../fonts/BasierCircle-Bold.woff2') format('woff2'),
      url('../fonts/BasierCircle-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basier Circle';
  src: url('../fonts/BasierCircle-SemiBold.woff2') format('woff2'),
      url('../fonts/BasierCircle-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

li {
	list-style-type: none;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
	display:none
}

::selection {
	background: rgba(var(--primary));
	color: rgba(var(--secondary));
} 

::moz-selection {
	background: rgba(var(--primary));
	color: rgba(var(--secondary));
} 

body {
  font-family: 'Basier Circle';
  font-size: 1rem;
	line-height: 165%;
	font-weight: 300;
  letter-spacing: 1px;
	color: rgba(var(--secondary-light));
	background-color: rgba(var(--secondary));
	scrollbar-width: none;
	hyphens: auto;
}



/* TYPOGRAPHY */

h1,h2,h3,h5 {
  font-family: 'Argesta Headline';
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  font-size: 5rem;
  line-height: calc(5rem + 8px);
}

h2 {
  font-size: 4rem;
  line-height: calc(4rem + 8px);
}

h3 {
  font-size: 3rem;
  line-height: calc(3rem + 8px);
}

.h3 {
  font-size: 3rem;
  font-family: 'Argesta Headline';
  font-weight: 400;
  letter-spacing: 0;
  line-height: calc(3rem + 8px);
}

h4 {
  font-size: 2rem;
  font-weight: normal;
  line-height: calc(2rem + 8px);
  letter-spacing: 6.4px;
}

.h4 {
  font-size: 2rem;
  font-weight: normal;
  line-height: calc(2rem + 8px);
  letter-spacing: 6.4px;
}

h5 {
  font-size: 1.5rem;
  line-height: calc(1.5rem + 8px);
}

.text-sm {
  font-size: 0.875rem;
  line-height: 22px;
}

.text-lg {
  font-size: 1.25rem;
  line-height: 36px;;
}



/* COMPONENTS */

/* COMPONENTS - Buttons */

.btn {
  display: inline-block;
  width: 100%;
  max-width: 20rem;
  padding: 0.75rem 1.5rem;
  margin: 0.5rem 0;
  font-family: 'Basier Circle';
  font-weight: 600;
  line-height: calc(1rem + 0.5rem);
  letter-spacing: 4.8px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: 300ms ease;
}

.btn:first-of-type {
  margin-right: 1rem;
}

.btn-primary {
  border: 2px solid rgba(var(--primary));
  color: rgba(var(--primary));
}

.btn-primary:hover{
  color: rgba(var(--secondary));
  background-color: rgba(var(--primary));
}

.btn-secondary {
  border: 2px solid rgba(var(--secondary-light));
  color: rgba(var(--secondary-light));
}

.btn-secondary:hover{
  color: rgba(var(--secondary));
  background-color: rgba(var(--secondary-light));
}

/* COMPONENTS - Countdown */

.countdown {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 5rem;
  backdrop-filter: blur(4px);
  border-top: 2px solid rgba(var(--secondary-light));
  z-index: 1;
}

.countdown-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* COMPONENTS - Boo */

.boo {
  height: 10rem;
  margin: 0.5rem;
}

.boo-manu {
  animation-name: boo-manu;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

@keyframes boo-manu {
  0%   {transform: translate(0rem,0rem);}
  50%  {transform: translate(-0.25rem,-1rem);}
  100% {transform: translate(0rem,0rem);}
}

.boo-amelie {
  animation-name: boo-amelie;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes boo-amelie {
  0%   {transform: translate(-0.25rem, 1rem);}
  50%  {transform: translate(0rem,0rem);}
  100% {transform: translate(-0.25rem,1rem);}
}

.img-booboo {
  height: 5rem;
}

/* COMPONENTS - Border */

.wrapper-border-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.wrapper-border-side {
  border-left: 2px solid rgba(var(--secondary-light));
  border-right: 2px solid rgba(var(--secondary-light));
  margin: 0;
}

.wrapper-border-inner-line-top {
  width: 100%;
  border-top: 2px solid rgba(var(--secondary-light));
}

.wrapper-border-inner-line-bot {
  width: 100%;
  border-bottom: 2px solid rgba(var(--secondary-light));
}

.corner-top-left {
  margin-right: -1px;
  margin-bottom: -1px;
}

.corner-top-right {
  margin-left: -1px;
  margin-bottom: -1px;
  transform: rotate(90deg);
}

.corner-bot-left {
  margin-right: -1px;
  margin-top: -1px;
  transform: rotate(90deg);
}

.corner-bot-right {
  margin-left: -1px;
  margin-top: -1px;
}

/* COMPONENTS - Table */

.table-row {
  display: flex;
  flex-direction: row;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(var(--secondary-light));
}

.table-head {
  width: 100px;
}

.table-body {
  color: rgba(var(--secondary-mid));
}

/* COMPONENTS - Images */

.img-boo-1 {
  aspect-ratio: 4 / 3;
  animation-name: boo-manu;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

.img-boo-2 {
  width: 75%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-left: 20rem;
  margin-top: -9rem;
  animation-name: boo-manu;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.img-boo-3 {
  width: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-left: 3rem;
  margin-top: -18rem;
  animation-name: boo-amelie;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.img-details-1 {
  width: 75%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  animation-name: boo-manu;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

.img-details-2 {
  width: 75%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  animation-name: boo-amelie;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}


/* COMPONENTS - Inputs */

input, textarea {
  width: 100%;
  font-family: 'Basier Circle';
  font-size: 1rem;
  line-height: 165%;
	font-weight: 300;
  letter-spacing: 1px;
  color: rgba(var(--secondary-mid));
  text-transform: none;
  display: inline-block;
  margin: 0.25rem 0 2rem 0;
  padding: 0.75rem 1.5rem;
  border: solid 2px rgba(var(--secondary-mid));
  background-color: transparent;
}

input:focus, textarea:focus {
  border-radius: 0;
  border: solid 2px rgba(var(--secondary-light));
}

label {
  color: rgba(var(--secondary-mid));
  font-size: 0.875rem;
  line-height: 22px;
}

.wpcf7-submit {
  display: inline-block;
  width: 100%;
  max-width: 20rem;
  padding: 0.75rem 1.5rem;
  margin: 0.5rem 0;
  font-family: 'Basier Circle';
  font-weight: 600;
  line-height: calc(1rem + 0.5rem);
  letter-spacing: 4.8px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: 300ms ease;
  border: 2px solid rgba(var(--primary));
  color: rgba(var(--primary));
}

.wpcf7-submit:hover{
  color: rgba(var(--secondary));
  background-color: rgba(var(--primary));
}



/* SECTIONS */

.hero {
  background-image: url(../img/hero-background.jpg);
  background-size: cover;
  background-position: center center;
/*  background-attachment: fixed;*/
}

.intro {
  background-color: rgba(var(--secondary-dark));
}

#breaker {
  background-image: url(../img/breaker-background.jpg);
  background-size: cover;
  background-position: center center;
/*  background-attachment: fixed;*/
}

footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 5rem 0 9rem 0;
}



/* UTILITY */

/* UTILITY - Colour */

.colour-primary {
  color: rgba(var(--primary));
}

.colour-secondary {
  color: rgba(var(--secondary));
}

.colour-secondary-light {
  color: rgba(var(--secondary-light));
}

.colour-secondary-mid {
  color: rgba(var(--secondary-mid));
}


/* UTILITY - Background Colour */

.bg-colour-secondary-dark {
  background-color: rgba(var(--secondary-dark));
}

.bg-colour-secondary-transparent {
  background-color: rgba(var(--secondary), 0.7);
}


/* UTILITY - Typo */

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

.et {
  position: absolute;
  margin-left: -2rem;
  color: rgba(var(--secondary-mid));
  font-size: 5rem;
  opacity: 0.25;
}


/* UTILITY - Spacing */

.mb-1-5 {
  margin-bottom: 1.5rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.mb-5 {
  margin-bottom: 5rem !important;
}

.p-5 {
  padding: 5rem !important;
}

.pb-3 {
  padding-bottom: 3rem !important;
}

.pb-10 {
  padding-bottom: 10rem !important;
}

.ptb-1 {
  padding: 1rem 0;
}

.ptb-2 {
  padding: 2rem 0;
}

.ptb-5 {
  padding: 5rem 0;
}

.ptb-10 {
  padding: 10rem 0;
}

.vh-74 {
  min-height: 74vh;
}

.vh-80 {
  min-height: 80vh;
}

.vh-100 {
  min-height: 100vh;
}


/* UTILITY - Effects */

.fade-in-hero {
  animation: fade-in-hero 10s;
}

@keyframes fade-in-hero {
  0% {opacity: 0;}
  100% {opacity: 100;}
}


/* MEDIA QUERIES */

@media only screen and (max-width: 520px) {
  
  .mobile-hide {
    display: none;
  }

  .container {
    padding: 0 2rem;
  }

  .hero-mobile-padding {
    padding: 0 2rem;
  }

  .boo {
    height: 8rem;
  }

  .btn {
    max-width: calc(100% - 4px);
  }

  .wpcf7-submit {
    max-width: calc(100% - 4px);
  }

  .p-5 {
    padding: 2rem !important;
  }

  .plr-2 {
    padding-left: calc(2rem - 12px);
    padding-right: calc(2rem - 12px);
  }

  .mb-3 {
    margin-bottom: 2rem !important;
  }

  h1 {
    font-size: 4rem;
    line-height: calc(4rem + 8px);
  }

  h2 {
    font-size: 3rem;
    line-height: calc(3rem + 8px);
  }

  h3 {
    font-size: 2.5rem;
    line-height: calc(2.5rem + 8px);
  }

  h4 {
    font-size: 1.5rem;
    line-height: calc(1.5rem + 8px);
  }

  .h3 {
    font-size: 2.5rem;
    line-height: calc(2.5rem + 8px);
  }

  .h4 {
    font-size: 1.5rem;
    line-height: calc(1.5rem + 8px);
  }

  .img-boo-2 {
    width: 50%;
    margin-left: 8rem;
    margin-top: -1rem;
  }

  .img-boo-3 {
    margin-left: 1rem;
    margin-top: -5rem;
  }

}