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

html {
    font-size: 62.5%;
    overflow-x: hidden;
} 

body {
    font-family: 'Commissioner', sans-serif;
    background-color: #fae6b14d;
}


.spacer {
    height: 5.5rem;
}


/* -------NAV PHONE BAR----------- */


.menu-btn,
  .exit-btn {
      display: none;
      cursor: pointer;
      opacity: 1;
  }
  
  .exit-btn {
      position: absolute;
      top:1%;
      right: 1%;
  }
  
  .modal-nav {
      height: 100vh;
      width: 100%;
      margin: 0 auto;
      display: grid;
      background-color: #31525b;
      position: absolute;
      top:0;
      left: 0;
      transform: translate(-100%);
      transition: all 1s;
      z-index: 9;
  }
  
  .active--modal {
      transform: translate(0);
  }
  
  .show-btn {
      display: block;
      z-index: 5;
  }
  
  .hidden-btn {
      opacity: 0;
  }
  
  .nav-menu-modal {
      display: flex;
      flex-direction: column;
      text-align: center;
      align-self: center;
      gap: 4rem;
      list-style: none;
  }
  
  .nav-link-modal {
      font-size: 4rem;
      text-decoration: none;
      color: #fff;
  }

/* -------NAV BAR----------- */

.header {
    padding: 1.2rem 2.4rem;
    background-color: #31525b;
    width: 100%;
    position: fixed;
    z-index: 8;
}

.header-box {
    margin: 0 auto;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2.2rem;
    color: #fae6b1;
}

.nav-bar {
    display: flex;
    list-style: none;
    font-size: 2.8rem;
    gap: 1.2rem;
}

.nav-link {
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    color: #b3dee5;
}

.nav-special {
    border: 2px solid #b3dee5;
    border-radius: 13px;
    color: #b3dee5;
    transition: all 0.3s;
}

.nav-special:hover {
    background-color: #b3dee5;
    color: #31525b;
}

/* -------HERO SECTION----------- */

.hero {
    padding: 0 2.4rem;
    position: relative;
    height: 80vh;
    margin-bottom: 19.2rem;
    ;
}

.hero-box {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}

.hero-container {
    justify-self: center;
    padding: 2.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.hero-banner {
    height: 60vh;
    justify-self: center;
    /* position: absolute;
    transform: translate(-50%);
    left: 50%; */
}

.hero-title {
    font-size: 7.2rem;
    color: #31525b;
}

.hero-caption {
    font-size: 4.8rem;
    color: #ffa101;
}

.hero-button {
    align-self: center;
    text-decoration: none;
    width: 50%;
    padding: 1.2rem 2.4rem;
    font-size: 3.2rem;
    background-color: #31525b;
    color: #b3dee5;
    border-radius: 13px;
    font-weight: bold;
    border: 2px solid #b3dee5;
    transition: all 0.3s;
}

.hero-button:hover {
    transform: scale(1.05);
    background-color: #b3dee5;
    color:#31525b;
    cursor: pointer;
}

.hero-socials {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    right: 3%;
    top: 3%;
}

.hero-social {
    width: 10rem;
    padding: 1.2rem;
    background-color: #31525b;
    border-radius: 50%;
    transition: all 0.3s;
}

.hero-social:hover {
    transform: scale(1.05);
    background-color: #ffa101;
    cursor: pointer;
}

/* -------COVID SECTION----------- */

.covid {
    padding: 2.4rem 4.8rem;
    background-color: #31525b;
}

.covid-box {
    margin: 0 auto;
    max-width: 80rem;
}

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

.covid-title {
    font-size: 4.8rem;
    text-align: center;
    padding: 2.4rem;
    color: #fff;
}

.covid-text {
    font-size: 2.4rem;
    color: #b3dee5;
}

.covid-link {
    color:#ffa101;
    text-decoration: none;
}

.covid-img {
    justify-self: center;
    padding: 2.4rem 0;
}

/* -------PARALLAX SECTION----------- */

.parallax {
    min-height: 60rem;
    background-image: url("imgs/leavespara.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}


/* -------WHATIS SECTION----------- */

.whatis {
    padding: 14.4rem 4.8rem 9.6rem;
    /* background-color: #31525b; */
}

.whatis-box {
    margin: 0 auto;
    max-width: 120rem;
}

.whatis-container {
    display: flex;
    gap: 9.6rem;
}

.whatis-img-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.whatis-image {
    overflow: hidden;
    width: 30rem;
    cursor: pointer;
    transition: all 0.3s;
}

.whatis-image:hover {
    transform: scale(1.1);
}

.whatis-info-box {
    display: flex;
    gap: 4.8rem;
    flex-direction: column;
    justify-content: center;
}

.whatis-title {
    font-size: 4.8rem;
    color: #31525b;
}

.whatis-info {
    font-size: 1.8rem;
    color: #777;
}

.whatis-linkto {
    text-decoration: none;
    font-size: 2.4rem;
    align-self: flex-end;
    color:#ffa101
}

.whatis-linkto:hover {
    text-decoration: underline;
    text-decoration-color: #31525b;
}



/* -------MANDALA SECTION----------- */

.mandala {
    padding: 9.6rem 4.8rem 9.6rem;
}

.mandala-box {
    margin: 0 auto;
    position: relative;
}

.mandala-box::before {
    content: url("imgs/mandala.png");
    position: absolute;
    transform: translate(-50%, -50%) scale(1.05);
    top: 50%;
    left: 50%;
    z-index: -1;
}

.mandala-container {
    display: flex;
    flex-direction: column;
    gap: 30rem;
}

.mandala-item {
    background-color: #31525b;
    border: 3px solid #ffa101;
    width: 60%;
    padding: 4.8rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    border-radius: 13px;
}

.mandala-item:last-child {
    align-self: flex-end;
    background-color: #ffa101;
    border: 3px solid #31525b;
}

.mandala-title {
    font-size: 3.6rem;
    color: #fff;
    align-self: center;
}

.mandala-title-last {
    color: #fff;
}

.mandala-text {
    font-size: 2.4rem;
    color: #ffa101;
}

.mandala-text-last {
    color:#31525b;
    font-size: 2.4rem;
}

.readmore {
    color: #b3dee5;
    text-decoration: none;
    font-size: 2.4rem;
}

.readmore-history {
    color: #fff;
    text-decoration: none;
    font-size: 2.4rem;
    
}

.readmore:hover,
.readmore-history:hover,
.covid-link:hover {
    text-decoration: underline;
}

/* -------COMPARE SECTION----------- */

.compare {
    padding: 9.6rem 4.8rem 9.6rem;
}

.compare-title {
    font-size: 4.8rem;
    margin: 0 0 4.8rem;
    margin-left: -4.8rem;
  }
  .compare-box {
    margin: 0 auto;
    max-width: 120rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .compare-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12rem;
  }
  .container-1-header,
  .container-2-header {
    font-size: 4.8rem;
    color: #ffa101;
  }
  .container-1-header {
    color: #31525b;
  }
  .compare-container {
    justify-items: flex-end;
  }
  .container-1,
  .container-2 {
    border-radius: 26px;

    /* height: 60rem; */
    font-size: 1.4rem;
    padding: 4.8rem 2.4rem;
    border: 8px solid #31525b;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2.4rem;
    width: 50rem;
  }
  .ten {
      color: #ffa101;
  }
  .container-2 {
    justify-self: flex-start;
    background-color: #31525b;
  }
  .list-item {
    font-size: 2.2rem;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .container-list {
    list-style: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    color: #b3dee5;
  }
  .container-list-1 {
    color: #555;
  }
  .btn {
    font-size: 2.4rem;
    text-decoration: none;
    color: #333;
    border-radius: 13px;
    background-color: #ffa101;
    padding: 2rem 3rem;
    width: 60%;
    font-weight: bold;
    transition: all 0.3s;
  }

  .btn:hover {
      transform: scale(1.05);
  }
  .btn2 {
    background-color: #b3dee5;
    /* border: 3px solid #ffa101; */
    color: #31525b;
  }
  .dot {
    width: 2rem;
    height: 2rem;
  }

  /* -------PRICING SECTION----------- */

.pricing {
    padding: 4.8rem;
}


.pricing-box {
    margin: 0 auto;
    max-width: 120rem;
    display: grid;
    justify-content: center;
}

.pricing-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12rem;
}

.pricing-item {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    grid-gap: 2.4rem;
    width: 30rem;
}

.price {
    color:#ffa101;
    font-size: 4.8rem;
    text-align: center;
    
}

.price-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #31525b;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
}

.price-box::after {
    content: "";
    position: absolute;
    background-color: #b3dee5;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    z-index: -1;
}

.price-service {
    font-size: 2.4rem;
    margin-top: 2.4rem;
    color: #333;
}

.price-service-info {
    font-size: 2.2rem;
    text-align: center;
    color: #31525b;
}


/* -------GALLERY SECTION----------- */

.gallery {
    padding: 0rem 2.4rem 4.8rem;
}

.gallery-box {
    margin: 0 auto;
    max-width: 180rem;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    height: 30rem;
}

.gallery-item {
    background-image: url("imgs/gallery1.jpg");
    background-position: center;
    background-size: cover;
}

.gallery-item2 {
    background-image: url("imgs/gallery2.jpg");
    background-position: center;
    background-size: cover;
}

.gallery-item3 {
    background-image: url("imgs/gallery3.jpg");
    background-position: center;
    background-size: cover;
}

.gallery-item4 {
    background-image: url("imgs/gallery4.jpg");
    background-position: center;
    background-size: cover;
}


  /* -------FOOTER SECTION------ */

.footer {
    padding: 9.6rem 4.8rem;
    background-color: #31525b;
    color: #b3dee5;
    display: grid;
    grid-template-columns: 1fr;
}

.footer-box {
    max-width: 150rem;
    margin: 0 auto;
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 3rem;
}

.footer-item {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
}

.footer-logo-copy {
    align-items: center;
}

.footer-logo {
    width: 30rem;
}

.copyright {
    font-size: 1.8rem;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}

.footer-socials-box {
    display: flex;
    gap: 2.4rem;
}

.footer-social {
    width: 4.8rem;
    transition: all 0.3s;
    cursor: pointer;
}

.footer-social:hover {
    transform: scale(1.05);
}

.footer-header {
    font-size: 2.8rem;
    padding-bottom: 1.8rem;
    color: #ffa101;
}

.footer-details {
    font-size: 1.8rem;
    text-align: center;
}

.footer-link {
    font-size: 2.2rem;
    text-decoration: none;
    color: #b3dee5;
    position: relative;
}

.created-by {
    justify-self: center;
    margin-top: 5rem;
    font-size: 1.8rem;
    color:#ddd;
    text-align: center;
}

.pauledward {
    text-decoration: none;
    color: #fff;
}

.footer-placeholder {
    font-size: 4.8rem;
}








/* -----------------ABOUT PAGE------------------- */

.about {
    padding: 0 4.8rem;
    /* height: 70vh; */
}

.about-box {
    margin: 0 auto;
    max-width: 120rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-banner {
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    z-index: -1;
    opacity: 0.5;
}

.about-container {
    padding: 18rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.8rem;
    /* justify-content: center;   
    align-content: center; */
}

.about-img-box {
    position: relative;
    justify-self: flex-start;
}



.about-img {
    width: 60rem;
    justify-self: flex-start;
    align-self: flex-start;
    position: relative;
}


.about-info-box {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.about-title {
    font-size: 4.8rem;
    color: #333;
}

.about-info {
    font-size: 2.4rem;
    color: #31525b;
    font-weight: bold;
}

.about-btn {
    padding: 1.2rem;
    font-size: 2.4rem;
    background-color: #31525b;
    cursor: pointer;
    color:#b3dee5;
    font-weight: bold;
    align-self: flex-end;
    border-radius: 13px;
    transition: all 0.3s;
}

.about-btn:hover {
    background-color: #b3dee5;
    color: #31525b;
}

/* -----------------PAGE INFO PAGE------------------- */

.page-heading {
    font-size: 7.2rem;
    color: #31525b;

}

.page-headers {
    margin: 0 auto;
    padding: 4.8rem;
}

.page-caption {
    font-size: 4.8rem;
    color: #ffa101;
}

.page-info-header {
    font-size: 4.8rem;
    padding: 2.4rem 0;
    color:#ffa101;
}

.page-info {
    padding: 0 4.8rem 9.6rem;
}

.page-info-box {
    margin: 0 auto;
    max-width: 120rem;
}

.page-info-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.page-info-text {
    font-size: 2.4rem;
    color: #31525b;
    font-weight: bold;
}

.page-info-link {
    font-size: 2.4rem;
    text-decoration: none;
    color:#ffa101;
}

.page-info-link:hover {
    text-decoration: underline;
}

.bullet-points-list {
    justify-self: center;
    list-style: none;
}

.bullet-point::before {
    content: "\2022";
    color: #ffa101;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

.bullet-point {
    font-size: 2.2rem;
    color: #31525b;
    padding: 0.6rem 0;
    font-weight: bold;
}

.diagram {
    padding-top: 2.4rem;
    align-self: center;
    width: 50%;
}

/* -----------------FAQ PAGE------------------- */

.faq {
    padding: 9.6rem 4.8rem;
}

.faq-box {
    margin: 0 auto;
    max-width: 120rem;
}

.faq-container {
    display: grid;
    grid-template-columns: 1fr;
}

.faq-title {
    font-size: 4.8rem;
    color:#31525b;
    padding: 2.4rem 0;
}

.accordion {
    font-size: 2.4rem;
    background-color: #31525b;
    color: #ffa101;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ffa101;
    color: #31525b;
    font-weight: bold;
}

.panel {
    border-bottom: 3px solid #b3dee5;
    padding: 0 2.4rem;
    font-size: 2.4rem;
    background-color: #b3dee5;
    color: #31525b;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel p {
    padding: 2.4rem;
}

.panel ul {
    padding: 0 2.4rem 2.4rem;
}



/* -------CTA SECTION------ */

.cta {
    padding: 9.6rem 4.8rem 9.6rem;
}

.cta-box {
    max-width: 120rem;
    margin: 0 auto;
}

.cta-container {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 3rem;
}

.cta-text {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    justify-items: center;
    align-items: center;
    color: #31525b;
}

.cta-title {
    font-size: 4.4rem;
    color: #31525b;
    text-align: center;
}

.cta-text-box {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    font-size: 2.2rem;
    text-align: center;
    padding: 1.2rem;
}

.cta-socials {
    align-self: center;
    justify-self: center;
    display: flex;
    gap: 6.2rem;
    padding: 3rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.input-box {
    border: none;
    border-bottom: 3px solid #ffa101;
    resize: none;
    padding: 1.2rem;
    background-color: #31525b;
    color:#b3dee5;
}

.mobile-input::-webkit-inner-spin-button, .mobile-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.mobile-input {
    -moz-appearance:textfield !important;
}

.message-input {
    height: 12rem;
    background-color: #31525b;
    color: #b3dee5;
}

.message-input::placeholder {
    color: #fff;
}

.input-box::placeholder {
    color: #fff;
}

.submit-btn {
    width: 25%;
    align-self: flex-end;
    padding: 0.8rem;
    border-radius: 3px;
    border: none;
    background-color: #31525b;
    color: #b3dee5;
    font-weight: bold;
    font-size: 2.2rem;
    font-family: 'Josefin Slab', serif;
}






.intro,
.intro a{
  color:#fff;
}
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 3.6rem;
  font-family: Arial;
  text-shadow: 0 0 1px #888;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #000;		
}