@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* TEXT */


p, form, label, input, ul, textarea, a, button, table {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size: 16px;
}


h1, h2, h3 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
}

h1 {
  color: #986698;
  margin-bottom: 16px;
}


h2 {
  margin-bottom: 8px;
  margin-top: 8px;
  color: #107673;
}

.bit-extra-top {
  margin-top: 16px;
}

ul {
  list-style-type: none;
}

ul.standard {
    list-style-type: disc;
    margin-left: 32px;
    margin-bottom: 16px;
}

ul li {
  margin-bottom: 16px;
}

a {
  text-decoration: none;
}

ul.narrative-list {
    margin-top: 16px;
}
ul.narrative-list-sub {
    margin-top: 16px;
    margin-bottom: 16px;
    padding-left: 32px;
    list-style-type: disc;
}


header {
  height: 18vw;
}

/*HEADER IMAGES*/
.headerCommon {
  height: 10vw;
  position: absolute;
  top: 4vw;
}

#logo {
  left: 4vw;
}

#hamburger {
  right: 4vw;
}

.tele {
  display: none;
}

/*HEADER NAVIGATION */
#main-nav {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease-in-out; /* optional: for smooth transition */
  background: #107673;
  padding-left: 4vw;
  padding-right: 4vw;
  color: white;
}

#main-nav.open {
  height: auto;
}

#main-nav li {
  padding-top: 16px;
  text-align: center;
}

#main-nav a {
  color: white;
}
#main-nav a:visited {
  color: white;
}
#main-nav a:active {
  color: white;
}

.add-bottom-nav{
  padding-bottom: 16px;
}

.hero {
  padding-left: 4vw;
  padding-right: 4vw;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  max-width: 560px;
  width: 100%;
  align-items: center;
}

.hero h1 {
  font-weight: 600;
  font-size: 32px;
  line-height: 36px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.hero p {
  padding-right: 16px;
  margin-bottom: 8px;
  font-size: 20px;
  margin-bottom: 20px;
}

.hero a {
  margin-bottom: 16px;
}

.item1 {
  grid-row-start: 2;
}

.item2 {
  grid-row-start: 1;
  display: none;
}

.hero a {
  display: block;
  height: 40px;
  width: 100px;
  border: none;
  color: white;
  font-weight: 600;
  background: #107673;
  line-height: 40px;
  text-align: center;
}


main {
    flex: 1;
    padding-left: 4vw;
    padding-right: 4vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16px;
    margin-bottom: 64px;
    max-width: 560px;
    width: 100%;

}

.narrative a {
  color: #986698;
}

.narrative a:visited {
  color: #986698;
}

.narrative a:active {
  color: #986698;
}

.main-squeeze {
  max-width: 760px;
}


/*BUY BUTTON */
#buy-it-now button {
  border-style: none;
  background: #107673;
  height: 48px;
  width: 100px;
  color: white;
  font-weight: bold;
  margin-top: 20px;
}


.blog-main {
  max-width: 760px;
}

.blog-main p {
  margin-bottom: 16px;
}

.blog-main h2 {
  margin-top: 32px;
  margin-bottom: 16px;
}

.blog-main img {
  width: 100%;
  margin-bottom: 16px;
  display: none;
}

#total-cost {
  font-weight: bold;
  font-size: 24px;
}


.info-grid {
  display: grid;
  grid-gap: 16px;
  margin-top: 16px;
}


.info-grid div {
  margin-left: auto;
  margin-right: auto;
}

.info-grid img {
  display: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  border-radius: 20px;
}



.service-grid {
  display: grid;
  grid-template-columns: 44vw 44vw;
  grid-gap: 4vw;
}

.service-grid button {
  background: none;
  border-style: solid;
  border-color: #986698;
  width: 100%;
  height: 44vw;
  color: #986698;
  font-weight: bold;
  border-radius: 10px;
}


/* main forms */
#main-forms input[type=text] {
  border-style: solid;
  border-color: #986698;
  margin-bottom: 16px;
}
#main-forms input[type=submit] {
  width: 140px;
}
#main-forms label {
  display: inline-block;
}
.spots {
  width: 20%;
  padding: 0;
  margin: 0;
}


/*info pack form */
#info-pack-form input[type=text] {
  border-style: solid;
  border-color: #986698;
  margin-bottom: 16px;
}
#info-pack-form input[type=email] {
  border-style: solid;
  border-color: #986698;
  margin-bottom: 16px;
}
#info-pack-form input[type=submit] {
  width: 140px;
}
#info-pack-form label {
  display: inline-block;
}
.alert {
  color: red;
}

/* calculator results */

table {
  width: 100%;
  max-width: 360px;
  margin-bottom: 48px;
  margin-top: 48px;
}

tr {
  height: 50px;
}

.table-head-bg {
  background-color: #197874;
  color: white;
  font-weight: 400;
}

.table-col-bg {
  background: #986698;
  color: white;
  font-weight: 400;
}

.table-bg {
  color: black;
}


.blog-grid {
  position: relative;
  display: grid;
}

.blog-grid > div {
  position: relative;
}

.blog-grid img {
  position: relative;
  width: 100%;
  display: none;
}

.blog-grid h2 {
  font-size: 22px;
}

.blog-grid a {
  display: block;
  height: 40px;
  width: 120px;
  border: none;
  color: white;
  font-weight: 600;
  background: #107673;
  line-height: 40px;
  text-align: center;
  margin-bottom: 32px;
}

footer {
    background-color: #986698;
    color: #fff;
    margin-top: auto;
}

.footer-wrap {
  padding: 20px;
}

.footer-elements {
  margin-left: auto;
  margin-right: auto;
}

.footer-center {
  text-align: center;
  color: white;
}

form {
  width: 100%;
  max-width: 360px;
  margin-bottom: 32px;
}

label {
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 4px;
}

input[type=text], input[type=email],textarea {
  width: 100%;
  border-style: none;
  padding: 8px;
}

input[type=text], input[type=email] {
  height: 40px;
}

input[type=submit] {
  height: 40px;
  width: 80px;
  border: none;
  color: white;
  font-weight: normal;
  background: #107673;
}


textarea {
  height: 120px;
  resize: none;
  margin-bottom: 16px;
}

.socials {
  display: grid;
  width: 75%;
  max-width: 360px;
  grid-template-columns: auto auto auto auto;
  margin-top: 16px;
  margin-bottom: 16px;
}

.socials > div {
  display: flex;
}

.socials img {
  height: 32px;
}

.footer-nav {
  margin-bottom: 10px;
}

.footer-nav a {
  color: white;
}
.footer-nav a:active {
  color: white;
}
.footer-nav a:visited {
  color: white;
}

.footer-footer {
  background: #7f4d7f;
  padding: 40px;
}

.footer-footer p {
  text-align: center;
  font-size: 14px;
  background: #7f4d7f;
}



.footer-footer a {
    color: white;
}
.footer-footer a:hover {
    color: white;
    font-weight: bold;
}
.footer-footer a:visited {
    color: white;
}
.footer-footer a:active {
    color: white;
}




.other-biz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.other-biz img {
  height: 40px;
  margin-bottom: 18px;
}


/* Media queries for different screen sizes */
@media only screen and (min-width: 320px) {
  /* Small screens (SM) and above */



}

@media only screen and (min-width: 480px) {
  /* Small screens (SM) and above */

  .hero {
    padding-left: 19px;
    padding-right: 19px;
  }

  main {
    padding-left: 19px;
    padding-right: 19px;
  }

}

@media only screen and (min-width: 576px) {
  /* Small screens (SM) and above */

  header {
    height: 104px;
  }

  #logo, #hamburger {
    height: 58px;
    top: 23px;
  }

  #logo {
    left: 23px;
  }

  #hamburger {
    right: 23px;
  }

  .service-grid {
    grid-template-columns: 116px 116px 116px 116px;
    grid-gap: 19px;
  }

  .service-grid button {
    width: 100%;
    height: 116px;
  }

}

@media only screen and (min-width: 768px) {
  /* Medium screens (MD) and above */

  .narrative a:hover {
    font-weight: bold;
  }

  .item1 {
    grid-row-start: initial;
  }



  .info-grid img {
    display: block;
    width: 240px;
  }

  .blog-grid {
    grid-template-columns: auto auto;
    grid-gap: 32px;
    padding-top: 8px;
  }

  .blog-grid > div {
    height: 440px;
    background: #f0dff0;
  }

  .blog-slide {
    margin-left: 16px;
  }

  .blog-grid img {
    display: block;
    width: 345px;
  }

  .blog-grid a {
    position: absolute;
    bottom: 0;
  margin-bottom: 16px;
  }

  .blog-grid a:hover {
    background: #986698;
  }

  .blog-main img {
    display: initial;
  }


}

@media only screen and (min-width: 992px) {
  /* Large screens (LG) and above */

  .extra-top {
    margin-top: 32px;
  }

  #hamburger {
    display: none;
  }

  .tele {
    display: grid;
    grid-template-columns: auto auto;
    color: #107673;
    width: 160px;
    position: absolute;
    right: 12px;
    top: 12px;
    align-items: center;
  }

  .tele img {
    height: 20px;
    margin-top: -2px;
  }

  .tele p {
    font-size: 14px;
    font-weight: 700;
  }

  #main-nav {
    height: 104px;
    overflow: initial;
    margin-top: -104px;
    transition: none; /* optional: for smooth transition */
    background: initial;
    padding-left: initial;
    padding-right: initial;
    z-index: 100;
    width: calc(100% - 196px);
    margin-left:196px;
  }

  #main-nav.open {
    height: initial;
  }

  #main-nav li {
    display: inline-block;
    padding-top: initial;
    text-align: center;
    width: 16.2%;
    padding-top: 56px;
  }

  #main-nav a {
    color: #107673;
  }

  #main-nav a:hover {
    font-weight: bold;
  }
  #main-nav a:visited {
    color: #107673;
  }
  #main-nav a:active {
    color: #107673;
  }

  .hero {
    margin-top: 0px;
    grid-template-columns: repeat(2, 50%);
    margin-left: auto;
    margin-right: auto;
    max-width: 992px;
  }

  .item2 {
    grid-row-start: initial;
    display: initial;
  }

  .hero a:hover {
    background: #986698;
  }

  .hero img {
    width: 100%;
    padding-top: 23px;
    padding-bottom: 0;
  }

  .divider {
    width: calc(100% - 46px);
    background: #107673;
    height: 2px;
    display: block;
    margin-bottom: 32px;
    margin-top: -5px;
    margin-left: 23px;
  }

  main {
    padding-top: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 992px;
  }


  .info-grid {
    display: grid;
    grid-gap: 48px;
    grid-template-columns: auto auto auto;
  }

  .info-grid img {
    display: block;
    width: 240px;
  }

  .info-grid h2 {
    margin-top: 16px;
  }

  .home {
    grid-template-columns: auto auto;
  }

  .footer-wrap {
    width: 992px;
    margin-left: auto;
    margin-right: auto;

  }

  .footer-wrap h2 {
    text-align: left;
  }

  .footer-layout {
    display: grid;
    grid-template-columns: 50% 50%;

  }

  .footer-layout form {
    max-width: 400px;

  }



  .footer-elements {
    margin-left: 0;
  }

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

  .paradown {
    margin-top: 32px;
  }

  .socials {
    width: 50%;
    margin-left: 0px;
  }

  .socials > div {
    width: 100%;
    justify-content: flex-start;
  }

  .footer-nav li {
    margin: 0;
  }

  .footer-nav a {
    color: white;
  }

  .footer-nav a:hover {
    font-weight: bold;
  }
  .footer-nav a:active {
    color: white;
  }
  .footer-nav a:visited {
    color: white;
  }

  input[type=submit]:hover {
    background: white;
    color: #107673;
    border-color: #986698;
    border-style: solid;
    border-width: 1px;
  }

}



@media only screen and (min-width: 1200px) {
  /* Extra-large screens (XL) and above */



}