:root {
  --color1:black;
  --color2:hsl(204,91%,22%);
  --color2t:hsla(204,91%,22%,70%);
  --color3:hsl(40,63%,62%);
  --color4:hsl(130, 38%, 49%);
  --color5:hsl(211, 29.5%, 58.8%);
  --color6:hsl(40,63%,44%);
  --colorlightgrey:hsl(211, 18%, 77%);
  --colormidgrey:hsl(0,0%,49%);
  --colordarkergrey:hsl(0,0%, 30%);
  --font1: "Urbanist", sans-serif;
  --font2: "Baskervville", sans-serif;
  --navback: white;
}

* {
  position: relative;
  box-sizing: border-box;
}

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font1);
}

.p {
  font-family: var(--font1);
  line-height: 1.3;
  color: var(--colordarkergrey);
}

.h5 {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--colormidgrey);
  margin: 0px;
  line-height: 1.2;
}

.bold {
  font-weight: 900;
}

.h5 em {
  font-weight: 800;
  font-style: normal;
  margin-bottom: 0.3rem;
  display: inline-block;
}

.subscript {
  font-weight: 400;
  margin: 0;
  font-size: 0.8rem;
  color: var(--colormidgrey);
}

.superscript {
  font-size: 56%;
  top: -10px;
  display: inline-block;
}

.whitetext {
  color: white;
}

.width100 {
  width: 100%;
}

.navbar {
  background-color: var(--navback);
  width: 100%;
  height: 50px;
}

.navbar-branding {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: flex-start;
  position: fixed;
  display: flex;
  justify-content: center;
  top: 0px;
  left: 0px;
  padding-top: 10px;
}

.nav-branding-inner {
  width: 75px;
  padding: 5px;
  background-color: white;
}

.navbar-branding img {
  width: 100%;
}

.nav-phone-number a {
  display: inline-block;
  height: 40px;
  display: flex;
  align-items: center;
  color: var(--colorlightgrey);
  text-decoration: none;
  font-family: var(--font1);
}

.nav-phone-number a .icon {
  display: inline;
  width: 20px;
  height: 20px;
  color: var(--colorlightgrey);
}

.main-app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 41px;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 100000;
  transition: height 0.5s ease-in-out;
  overflow: hidden;
}

.main-app-header .navbar-inner {
  display: grid;
  grid-template-columns: 1fr 50px;
  grid-template-rows: 40px 1fr;
  border-bottom: 1px solid var(--color2);
}

.main-app-header.expanded {
  height: 100dvh;
}

.header-branding, .header-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 40px;
}

.svg-container {
  width: 50px;
  height: 40px;
  background-color: none;
  display: inline-block;
}

.path {
  stroke-width: 15px;
  stroke-linecap: round;
  stroke: var(--color2);
  fill: none;
  stroke-linejoin: round;
  stroke-dasharray: 100 141 100 142;
  stroke-dashoffset: 100;
}

.line {
  stroke-width: 15px;
  stroke-linecap: round;
  stroke: var(--color2);
  stroke-dasharray: 100, 100;
  stroke-dashoffset: 0;
}

@keyframes pathanim {
  0% {
    stroke-dasharray: 99 143 99 143;
    stroke-dashoffset: -142;
  }
  50% {
    stroke-dasharray: 0 242 0 143;
    stroke-dashoffset: -142;
  }
  100% {
    stroke-dasharray: 141 100 142 143;
    stroke-dashoffset: 0;
  }
}
@keyframes pathanimr {
  100% {
    stroke-dasharray: 99 143 99 143;
    stroke-dashoffset: -142;
  }
  50% {
    stroke-dasharray: 0 242 0 143;
    stroke-dashoffset: -142;
  }
  0% {
    stroke-dasharray: 141 100 142 143;
    stroke-dashoffset: 0;
  }
}
@keyframes line-ma {
  0% {
    stroke-dasharray: 99 1000;
    stroke-dashoffset: -60;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 200;
    opacity: 0;
  }
}
@keyframes line-mar {
  0% {
    stroke-dasharray: 99 1000;
    stroke-dashoffset: 200;
    opacity: 0;
  }
  40% {
    stroke-dasharray: 99 1000;
    stroke-dashoffset: 200;
    opacity: 0;
  }
  100% {
    stroke-dasharray: 99 1000;
    stroke-dashoffset: -60;
    opacity: 1;
  }
}
.svg-container {
  overflow: hidden;
}

/*Layout four*/
.svg-container.four .path {
  stroke-dasharray: 99 143 99 143;
  stroke-dashoffset: -142;
}

.svg-container.four .line-ma {
  stroke-dasharray: 99 1000;
  stroke-dashoffset: -60;
  opacity: 1;
}

.svg-container.four.open .path {
  animation: pathanimr 1s;
}

.svg-container.four.open .line-ma {
  animation: line-mar 1.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

/* .check-box-container:checked ~ svg path.path{
    animation: pathanim 1s forwards;
    stroke-dasharray: 141 100 142 143;
    stroke-dashoffset: 0;


}
.check-box-container:checked ~ svg path.path
.check-box-container:checked ~ svg line.line-ma {
stroke-dasharray: 99 1000;
stroke-dashoffset: 200;
animation: line-ma 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
opacity: 0;

} */
.svg-container.closed svg path.path {
  animation: pathanim 1s forwards;
  stroke-dasharray: 141 100 142 143;
  stroke-dashoffset: 0;
}

.svg-container.closed svg line.line-ma {
  stroke-dasharray: 99 1000;
  stroke-dashoffset: 200;
  animation: line-ma 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  opacity: 0;
}

.check-box-container {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.header-menu {
  overflow: auto;
  color: rgba(255, 255, 255, 0.76);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  position: absolute;
  top: 40px;
}

.header-menu .menu-list-ul {
  list-style-type: none;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  margin-top: 40px;
}

.header-menu .menu-list-ul .menu-list-li {
  padding: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 90%;
  height: 40px;
  margin: 0px;
  overflow: hidden;
}

.menu-link {
  text-decoration: none;
  color: var(--colormidgrey);
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font1);
}

.menu-link:hover {
  color: var(--color3);
}

@media (orientation: landscape) and (min-width: 900px) {
  .navbar {
    height: 88px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .main-app-header .navbar-inner {
    width: 100%;
    grid-template-columns: 130px 1fr;
    grid-template-rows: 30px 1fr;
    height: 70px;
  }
  .header-nav {
    display: none;
  }
  .navbar-branding {
    top: 12px;
  }
  .header-menu {
    right: 0px;
    top: 0px;
    justify-content: flex-end;
    position: relative;
    width: auto;
    padding-right: 10px;
  }
  .header-menu .menu-list-ul {
    flex-wrap: nowrap;
    margin-top: 0px;
  }
  .header-menu .menu-list-ul .menu-list-li {
    min-width: unset;
    margin-left: 20px;
    border-bottom: 0px;
  }
  .navbar .menu-link {
    color: var(--colorlightgrey);
  }
  .navbar .menu-link:hover {
    color: var(--colordarkergrey);
  }
}
body {
  min-width: 340px;
  font-family: var(--font1);
}

.container-16 {
  display: grid;
  grid-template-columns: repeat(16, 6.25%);
  width: 100%;
  padding-top: 48px;
  align-items: start;
  justify-content: center;
}

.flex-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.hero {
  padding-top: 70px;
  min-height: 100dvh;
  padding-bottom: 50px;
}

.hero-image-section {
  grid-column: 1/17;
  padding: 5px;
}

.hero-text-section {
  grid-column: 1/17;
}

.hero-images-container {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 50% 50%;
  margin: 0;
  gap: 5px;
  overflow: hidden;
}

.hero-image-container {
  width: 100%;
  margin: 0;
  display: flex;
  overflow: hidden;
}

.hero-image-container:nth-child(1) {
  grid-column: 1/3;
}

.hero-image {
  width: 100%;
}

.hero-text-section {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.hero .headline, .hero .lead-container, .hero .bullet-points-container, .hero .paragraph-container, .hero .hero-cta-container {
  grid-column: 1/17;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.hero .headline {
  align-items: flex-end;
  font-size: clamp(1.5rem, 7vw, 2.5rem);
  padding-top: 30px;
}
.hero .headline .larger {
  margin-right: 0.3rem;
}
.hero .lead {
  font-size: clamp(1.3rem, 6vw, 2.14rem);
}

.strap-line {
  font-weight: 400;
  font-size: 1rem;
  color: var(--colormidgrey);
  padding-left: 3.5vw;
  grid-column: 1/17;
  font-family: var(--font2);
  text-align: center;
  margin: 0;
  margin-bottom: 5px;
}

.headline {
  color: var(--color2);
  width: 100%;
  font-size: 7vw;
  line-height: 1.05;
  font-family: var(--font2);
  font-weight: 600;
  text-align: center;
  margin: 0;
}

.larger {
  font-size: 1.5em;
}

.lead {
  color: var(--colormidgrey);
  font-weight: 400;
  margin-top: 2px;
  font-size: 6vw;
}

.headline .block-text, .headline .block-text2 {
  position: absolute;
  height: 100%;
  background-color: var(--color3);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0;
}

.headline .block-text2 {
  position: relative;
  float: left;
  height: 100%;
  display: block;
}

.bullet-points, .border-block {
  font-family: var(--font1);
  width: 80%;
  margin: 0;
  padding: 12px 18px 18px 0px;
  border: 1px solid var(--colorlightgrey);
  border-radius: 20px;
  max-width: 350px;
  display: flex;
  justify-content: center;
}

.border-block {
  padding: 30px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.bullet-points li {
  color: var(--colormidgrey);
  font-size: 1.1rem;
  margin: 0;
  padding: 0;
  margin-top: 5px;
}

.bullet-points li::marker {
  font-size: 0.9rem;
}

.hero-paragraph {
  font-weight: 400;
  color: var(--colordarkergrey);
  width: clamp(280px, 80%, 400px);
  margin-top: 20px;
}

.hero-paragraph .p {
  font-size: 1.1rem;
}

.contact-button-container {
  text-decoration: none;
  display: flex;
  margin-top: 15px;
  align-items: center;
}

.contact-button-icon {
  width: 40px;
  height: 40px;
  background-color: var(--color3);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  z-index: 2;
  border: 2px solid white;
}

.contact-button-icon .icon {
  width: 20px;
  height: 20px;
}

.contact-button-info-container {
  border: 1px solid var(--colorlightgrey);
  height: 32px;
  width: 150px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -20px;
  color: var(--colordarkergrey);
  font-size: 1.1rem;
}

.underline {
  text-decoration: underline;
  text-decoration-color: var(--color3);
}

.summary-arrow {
  margin-left: 5px;
  color: var(--color3);
  text-decoration: none;
}

.case-study-closed {
  display: none;
}

.section-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-heading {
  font-size: clamp(1.5rem, 7.96vw, 2.1rem);
  color: var(--colormidgrey);
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}

.multipart {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.multipart .section-heading {
  padding-top: 6vw;
  width: 80%;
  max-width: 380px;
}

.section-lead {
  color: var(--colordarkergrey);
  max-width: 250px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s ease-in-out;
}

.section-lead.closed {
  grid-template-rows: 0fr;
}

.section-lead p {
  overflow: hidden;
}

.multipart .section-lead {
  width: clamp(200px, 70%, 280px);
  max-width: unset;
  font-size: clamp(1.1rem, 6vw, 1.2rem);
  font-weight: 400;
  margin-top: clamp(20px, 8vw, 40px);
}

.section.cta, .section.cta.nutec {
  background: url("../images/products/nutec/6x7nutec.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.section.cta.wooden {
  background-image: url("../images/products/wooden/overlapping-wendy-6x10.jpg");
}

.section.cta.logs {
  background-image: url("../images/products/logs/3x7m_log_cabin_with_veranda.jpg");
}

.section-cta-container {
  width: 100%;
  padding-top: 10vw;
  padding-bottom: 10vw;
  background-color: var(--color2t);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.section.cta {
  font-family: var(--font1);
}
.section.cta .section-heading {
  color: white;
}
.section.cta .section-lead {
  color: white;
  font-size: 1.4rem;
  width: 80%;
  max-width: 300px;
}
.section.cta .section-cta-buttons-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
.section.cta .contact-button-info-container {
  color: white;
}

.section.filledbackground {
  width: 100%;
  height: 100dvh;
  background: url("../images/products/nutec/3X13-l-shape-nutec-house.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}
.section.filledbackground .filledbackground-inner {
  background-color: rgba(68, 68, 68, 0.6666666667);
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 65px 5% 20px 5%;
}
.section.filledbackground .filledbackground-content {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 500px;
}
.section.filledbackground .section-heading, .section.filledbackground .section-lead p, .section.filledbackground .accordian-heading, .section.filledbackground .accordian-paragraph {
  color: white;
}
.section.filledbackground .section-lead p, .section.filledbackground .accordian-paragraph {
  font-family: var(--font1);
  font-size: 1.1rem;
}

.section.simple {
  padding-top: 80px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 40px;
}
.section.simple .section-header {
  margin-bottom: 20px;
}
.section.simple .simple-section-content {
  max-width: 400px;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.section.simple .simple-section-text {
  width: 90%;
  margin-bottom: 10px;
}
.section.simple .simple-section-image {
  width: 100%;
}
.section.simple .simple-section-image-img {
  width: 100%;
}

.section.multi {
  padding: 20px;
  padding-top: 60px;
}
.section.multi .section-heading {
  margin-bottom: 50px;
  width: 100%;
}

.section-content.accordian {
  display: flex;
  flex-wrap: wrap;
}

.section.contactsection {
  min-height: 100dvh;
  flex-wrap: wrap;
  padding-top: 40px;
}

.section.contactsection .columns {
  padding-top: 20px;
  flex: 1 1 301px;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-label {
  font-size: 1.1rem;
  font-weight: 400;
}

.map-container {
  width: 100%;
}

.accordian-bellow {
  border-bottom: 1px solid var(--colorlightgrey);
  transition: grid-template-rows 0.5s ease-in-out;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  width: 100%;
  display: grid;
  grid-template-rows: 50px 1fr;
}

.accordian-bellow.closed {
  grid-template-rows: 50px 0fr;
}

.accordian-heading {
  color: var(--colordarkergrey);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0px;
  padding-top: 10px;
}

.accordian-arrow {
  color: var(--color3);
  margin: 0;
  display: inline-block;
  transition: transform 0.5s ease-in-out;
}

.accordian-arrow.down {
  transform: rotate(90deg);
}

.accordian-paragraph {
  color: var(--colordarkergrey);
  overflow: hidden;
}

.accordian-paragraph .first-letter {
  font-size: 2.38em;
  line-height: 1;
  vertical-align: top;
  float: left;
}

.orange-strip {
  width: 15%;
  height: 60vw;
  background-color: var(--color3);
  position: absolute;
  top: 0px;
  left: 0px;
}

.image-strip {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 12vw;
}

.image-strip .img {
  height: 100%;
  width: 100%;
}

.img {
  width: 100%;
}

.cards-container {
  width: 100%;
  gap: 80px;
  flex-wrap: wrap;
  padding: clamp(10px, 1vw, 100%);
  margin-bottom: 80px;
  align-items: stretch;
}

.card {
  width: 80%;
  max-width: 315px;
  flex: 1 1 320px;
}

.card.review {
  border-bottom: 1px solid var(--colormidgrey);
  margin-bottom: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.review-container {
  width: 90%;
}

.card-title {
  font-size: clamp(1.6rem, 8vw, 2rem);
  color: var(--colormidgrey);
  font-weight: 300;
  margin: 0;
}

.card-content {
  flex-wrap: wrap;
  color: var(--colordarkergrey);
}

.card-image-container {
  width: 100%;
  height: auto;
}

.card-image {
  width: 100%;
}

.card-image.medium {
  width: 60%;
}

.card-image-img {
  width: 100%;
}

.card-link {
  color: var(--color3);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  font-family: var(--font1);
  display: inline-block;
  padding: 10px;
  text-align: right;
  width: 100%;
}

.card-image.round {
  border-radius: 100%;
  overflow: hidden;
  height: 100%;
}

.image-header-text {
  padding-bottom: 18px;
  border-bottom: 2px solid orange;
}
.image-header-text .card-header {
  width: 100%;
  display: grid;
  align-items: stretch;
  grid-template-columns: 44% 56%;
}
.image-header-text .card-header .card-image {
  width: 100%;
}
.image-header-text .card-header .card-header-title {
  display: flex;
  width: 100%;
  padding-right: 5px;
  justify-content: flex-start;
  align-items: flex-end;
  background-color: #444;
}
.image-header-text .card-header .card-title {
  font-size: 1.8rem;
  color: var(--colorlightgrey);
  font-weight: 300;
  margin: 0;
  padding-left: 5px;
  text-decoration-color: var(--color3);
  text-decoration-thickness: 4px;
}
.image-header-text .card-content {
  margin-top: 25px;
  padding-left: 20px;
  padding-right: 20px;
}

.header-text {
  padding-bottom: 18px;
  border-bottom: 2px solid orange;
}
.header-text .card-title {
  margin-bottom: 20px;
}

.headertext-subcard .card-header {
  width: 100%;
  display: grid;
  align-items: stretch;
  grid-template-columns: 56% 44%;
}
.headertext-subcard .card-header .card-image {
  width: 100%;
}
.headertext-subcard .card-header .card-header-title {
  display: flex;
  width: 100%;
  padding-right: 5px;
  justify-content: flex-start;
  align-items: flex-end;
  background-color: #444;
}
.headertext-subcard .card-header .card-title {
  font-size: 1.5rem;
  color: var(--colorlightgrey);
  font-weight: 300;
  margin: 0;
  padding-left: 5px;
  text-decoration-color: var(--color3);
  text-decoration-thickness: 4px;
}

.link-arrow {
  margin-left: 5px;
}

.cta-button {
  width: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  height: 50px;
  border-radius: 25px;
  color: white;
  background-color: var(--color3);
  margin-top: 20px;
}

.cta-button.whatsapp {
  background-color: var(--color4);
}

.cta-button.email {
  background-color: var(--color5);
}

.cta-button a {
  color: white;
  text-decoration: none;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.gallery {
  min-height: 90dvh;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.gallery .gallery-container {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.gallery .gallery-image-container {
  width: 100%;
  margin-bottom: 30px;
  flex: 1 1 360px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery .gallery-image {
  width: 100%;
}

.modal {
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  z-index: 100000000;
}

.modal-inner {
  width: clamp(280px, 90%, 500px);
  height: clamp(300px, 80dvh, 500px);
  background-color: white;
  border-radius: 20px;
  padding: 20px;
  transform: scale(100%);
  transition: transform 0.4s ease-in-out;
}

.modal-header {
  height: 40px;
}

.modal-close-button {
  width: 35px;
  height: 35px;
  border-radius: 20px;
  border: 1px solid #999;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 27px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.modal-heading {
  font-size: 1.8rem;
  color: var(--colormidgrey);
}

.modal-content {
  display: grid;
  height: 100%;
}

.modal-main {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.modal-button-group {
  margin-bottom: 30px;
}

.modal-button-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 300px;
}

.modal-cta-label {
  width: 100%;
  font-size: 1.1rem;
  font-family: var(--font1);
  margin-bottom: 5px;
  color: var(--colormidgrey);
}

.modal-cta-button {
  min-width: 180px;
  height: 40px;
}

.modal-cta-button a {
  width: 100%;
  height: 100%;
  display: flex;
  text-decoration: none;
}

.modal-cta-button .icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color2t);
  border-radius: 20px;
}

.modal-cta-button .icon svg {
  fill: white;
  width: 70%;
  height: 70%;
}

.modal-cta-button .btn-label {
  text-decoration: none;
  color: var(--color2t);
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 1rem;
  --border: 1px solid var(--color2t);
  border-top: var(--border);
  border-right: var(--border);
  border-bottom: var(--border);
  padding-left: 5px;
  padding-right: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-left: 5px;
  flex-grow: 1;
  font-family: var(--font2);
}

.modal-cta-button.phone:hover .btn-label {
  background-color: var(--color2t);
  color: white;
}
.modal-cta-button.phone:hover .icon {
  background-color: white;
  border: 1px solid var(--color2t);
}
.modal-cta-button.phone:hover .icon svg {
  fill: var(--color2t);
}

.whatsapp .icon {
  background-color: var(--color4);
}
.whatsapp .btn-label {
  border-color: var(--color4);
  color: var(--color4);
}

.modal-cta-button.whatsapp:hover .btn-label {
  background-color: var(--color4);
  color: white;
}
.modal-cta-button.whatsapp:hover .icon {
  background-color: white;
  border: 1px solid var(--color4);
}
.modal-cta-button.whatsapp:hover .icon svg {
  fill: var(--color4);
}

.email .icon {
  background-color: var(--color6);
}
.email .btn-label {
  border-color: var(--color6);
  color: var(--color6);
}

.modal-cta-button.email:hover .btn-label {
  background-color: var(--color6);
  color: white;
}
.modal-cta-button.email:hover .icon {
  background-color: white;
  border: 1px solid var(--color6);
}
.modal-cta-button.email:hover .icon svg {
  fill: var(--color6);
}

.modal.closed {
  height: 0px;
  width: 0px;
  opacity: 0;
}

.modal.opacity0 {
  opacity: 0;
}

.modal.opacity0 .modal-inner, .modal.closed .modal-inner {
  transform: scale(50%);
}

.footer {
  background-color: var(--color2);
  width: 100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-column {
  width: 33%;
  padding: 20px;
  color: var(--colorlightgrey);
  flex: 1 1 300px;
}

.footer-column .p {
  font-family: var(--font1);
  color: var(--colorlightgrey);
}

.footer-menu .footer-menu-list-li a {
  height: 30px;
  text-decoration: none;
  color: var(--colorlightgrey);
  display: inline-block;
  font-family: var(--font1);
}
.footer-menu .footer-menu-list-li a:hover {
  color: var(--color3);
}

.footer-header {
  font-size: 1.2rem;
  font-weight: 600;
}

.contact-bubbles {
  --w: 50px;
  --h: 50px;
  --iw: 40px;
  position: fixed;
  bottom: 5dvh;
  right: 5dvw;
  z-index: 1000000;
  width: auto;
  height: var(--h);
  display: flex;
  justify-content: flex-start;
}
.contact-bubbles .contact-bubbles-buttons-container {
  width: 0px;
  height: var(--h);
  overflow: hidden;
  transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;
  opacity: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-right: 50px;
}
.contact-bubbles .contact-bubbles-button {
  width: var(--iw);
  height: var(--iw);
  border-radius: 100%;
  background-color: var(--color3);
  border: 2px solid white;
  box-shadow: 3px 3px 5px rgba(68, 68, 68, 0.5333333333);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-bubbles .contact-bubbles-toggle {
  width: var(--w);
  height: var(--h);
  position: absolute;
  right: 0px;
  top: 0px;
}
.contact-bubbles .wh100 {
  width: 100%;
  height: 100%;
}
.contact-bubbles .contact-bubbles-shadow-element {
  width: 90%;
  height: 90%;
  position: absolute;
  border-radius: 100%;
  filter: blur(3px);
  top: 8%;
  left: 12%;
  background-color: rgba(68, 68, 68, 0.5333333333);
}
.contact-bubbles .contact-bubbles-toggle-bubble img {
  transform: rotate(0deg);
  transition: all 0.5s ease-in-out;
  transform-origin: 54.4% 50%;
}
.contact-bubbles .contact-bubbles-toggle-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-bubbles .contact-bubbles-toggle-icon img {
  width: 45%;
  height: 45%;
  margin-left: 10%;
}
.contact-bubbles .icon {
  color: white;
  width: 60%;
}

.contact-bubbles.openbubble .contact-bubbles-buttons-container {
  width: 300px;
  opacity: 1;
}
.contact-bubbles.openbubble .contact-bubbles-toggle-bubble img {
  transform: rotate(180deg);
  margin-left: 5%;
}

.table-section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.table-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
  padding-left: 10px;
  padding-right: 10px;
}

.table {
  border-collapse: separate; /* Required for border-spacing to work */
  border-spacing: 0 5px;
  color: #444;
}
.table .th, .table .td {
  padding: 8px 10px;
  text-align: center;
}
.table .tr {
  margin-bottom: 5px;
}
.table .tr:nth-child(even) {
  background-color: #ddd;
}
.table .icon {
  width: 20px;
  height: 20px;
  margin-left: auto;
  margin-right: auto;
}

.specials {
  width: 100%;
  margin-bottom: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.specials .h3 {
  color: var(--colormidgrey);
  width: 100%;
}
.specials .specials-offer-container {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5333333333);
}
.specials .specials-offer-container .specials-offer-image-container, .specials .specials-offer-container .specials-offer-text-container {
  flex: 1 1 360px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.specials .specials-offer-container .specials-offer-image-container {
  background-color: #444;
}
.specials .specials-offer-container .specials-offer-image-container .specials-offer-image {
  width: 100%;
}
.specials .specials-offer-container .specials-offer-text-container {
  background-color: #444;
  padding: 20px;
  justify-content: center;
}
.specials .specials-offer-container .specials-offer-text-container .offer-header {
  width: 100%;
  color: var(--colorlightgrey);
  font-size: 1.6rem;
}
.specials .specials-offer-container .specials-offer-text-container .offer-list {
  color: #aab6be;
}
.specials .specials-offer-container .specials-offer-text-container .white-text {
  color: white;
}
.specials .specials-offer-container .specials-offer-text-container .subnote {
  font-size: 0.8rem;
  color: var(--colorlightgrey);
}

@media (hover: hover) and (pointer: fine) {
  .contact-bubbles {
    display: none;
  }
}
@media (min-width: 900px) {
  html {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .main-app-header {
    left: 50%;
    transform: translateX(-50%);
  }
  body, .main-app-header {
    max-width: 1500px;
  }
  .container-16 {
    padding-top: 88px;
    padding-bottom: 120px;
  }
  .hero {
    min-height: unset;
    grid-template-rows: auto 1fr auto 1fr auto auto;
  }
  .hero.container-16 {
    align-content: center;
  }
  .hero.container-16 .hero-image-section {
    grid-column: 8/17;
    grid-row: 2/5;
    padding-right: 1.5vw;
    height: 100%;
    overflow: hidden;
  }
  .hero.container-16 .strap-line {
    font-size: 1rem;
    padding-left: 0px;
    grid-column: 1/17;
    grid-row: 1/2;
    margin-bottom: 0px;
  }
  .hero.container-16 .headline {
    margin-top: 18px;
    grid-row: 2/3;
    grid-column: 1/8;
    align-self: end;
    font-size: 2.2rem;
  }
  .hero.container-16 .lead-container {
    grid-row: 3/4;
    grid-column: 1/8;
  }
  .hero.container-16 .lead {
    font-size: 1.8rem;
  }
  .hero.container-16 .bullet-points-container {
    grid-row: 4/5;
    grid-column: 1/8;
  }
  .hero.container-16 .hero-paragraph {
    font-size: 1rem;
    width: 408px;
  }
  .hero.container-16 .hero-paragraph .p {
    font-size: 1rem;
  }
  .hero.container-16 .hero-cta .h5 {
    font-size: 1.1rem;
  }
  .bullet-points {
    margin-top: 0px;
  }
  .hero.container-16 .bullet-points li {
    font-size: 1rem;
  }
  .hero.container-16 .hero-cta.mid-screen {
    display: flex;
    width: 270px;
  }
  .hero-images-container.large {
    display: grid;
  }
  .hero-images-container.small {
    display: none;
  }
  .hero.container-16 .hero-image-section .hero-images-container.large {
    display: grid;
    /*grid-template-columns: 1fr;
    grid-template-rows:33% 33% 33%;*/
    height: 100%;
    gap: 10px;
  }
  .hero-image-row {
    width: 100%;
    display: flex;
    flex-wrap: no-wrap;
    flex: 1 1 auto;
    gap: 11px;
    overflow: hidden;
  }
  .hero-image-row .hero-image-container {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
  }
  .hero-image {
    width: 100%;
  }
  .filledbackground.accordian .filledbackground-insetbox, .filledbackground.reviews .section-heading.h3 .filledbackground-inset .section-heading {
    font-size: 2rem;
    width: 400px;
    margin-bottom: 0px;
  }
  .multipart .section-heading {
    font-size: 2.5rem;
    width: 400px;
    max-width: 400px;
  }
  .multi .section-heading {
    font-size: 2.5rem;
  }
  .section-lead {
    max-width: 335px;
  }
  .section-content.accordian {
    width: 400px;
  }
  .orange-strip {
    height: 65dvh;
  }
  .section.cta .section-cta-buttons-container {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
  }
  .section.multi {
    padding-top: 160px;
    padding-bottom: 160px;
  }
}/*# sourceMappingURL=main1.1.css.map */