@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");

* {
  transition: all 0.3s ease-in-out;
}

a {
  /* text-decoration: none; */
}

body {
  font-family: "Nunito", sans-serif;
}

.pt-font {
  font-family: "PT Serif", serif;
}

p a {
  text-decoration: underline;
  color: #30b354;
}

section {
  max-width: 100vw;
}
.sec-title {
  font-weight: 500;
  font-size: 36px;
  line-height: 130%;
}

.sec-subtitle {
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  color: #676767;
  margin: 1rem auto;
}

.box-bg {
  background-image: url("/assets/site/bg-pattern-9a340ba3.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Same geometric pattern behind a block, tiled at its native scale so every band keeps the
   same star size. The file draws it at 5% alpha; the design uses about half of that on
   page tops and bands, and twice it (two stacked copies) in the footer. */
.site-pattern {
  position: relative;
  isolation: isolate;
}
.site-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("/assets/site/bg-pattern-9a340ba3.svg");
  background-position: center top;
  background-size: 1440px auto;
  opacity: 0.5;
}
.site-pattern-strong::before {
  background-image: url("/assets/site/bg-pattern-9a340ba3.svg"), url("/assets/site/bg-pattern-9a340ba3.svg");
  opacity: 1;
}
/* Larger pattern that fades out below the top of a card */
.site-pattern-top::before {
  opacity: 1;
  background-size: 2160px auto;
  mask-image: linear-gradient(to bottom, #000, transparent 240px);
}

.box-shadow {
  box-shadow: 0px 2px 7px 0px #00000040;
}

/* **************************** */
/* Text Colors: */
/* **************************** */
.text-dark {
  color: #0a3013;
}
.text-light {
  color: #676767;
}
.text-green {
  color: #259142;
}

/* **************************** */
/* Buttons */
/* **************************** */
.btn {
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  border-radius: 16px;
  padding: 0.75rem 2.5rem;
  width: fit-content;
  &.small {
    border-radius: 10px;
    font-size: 15px;
    padding: 0.5rem 1rem;
  }
  svg {
    width: 24px;
    height: 24px;
  }
}
.btn-primary {
  color: #ffffff;
  background-color: #30b354;
  &:hover {
    background-color: #249640;
  }
}
.btn-outline-white {
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #ffffff;
  &:hover {
    background-color: #ffffff;
    color: #000000;
  }
}
.btn-link {
  color: #30b354;
  padding: 0 1rem;
  font-size: 18px;
  &:hover {
    text-decoration: underline;
  }
  img {
    width: 7px;
  }
}
/* **************************** */
/*         Home Page.           */
/* **************************** */
.hero-sec {
  .box {
    background-position: top center;
    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background:
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 13.53%,
          rgba(0, 0, 0, 0.5) 56.77%,
          #000000 100%
        ),
        linear-gradient(
          0deg,
          rgba(0, 0, 0, 0) 80.51%,
          rgba(0, 0, 0, 0.5) 89.81%,
          #000000 102.4%
        );
    }
    .content {
      position: relative;
      z-index: 1;
      .title {
        font-family: "PT Serif", serif;
        font-weight: 400;
        font-size: 40px;
        line-height: 120%;
      }
    }
  }
  .splide__arrow {
    border: 0.75px solid #dfdfdf;
    background: #ffffff99;
    svg {
      fill: #18455bcc;
      height: 8px;
      width: 8px;
    }
  }
}

/* Why Choose Us Section */
.why-choose-us-sec {
  .box {
    .title {
      font-family: "PT Serif", serif;
      font-weight: 400;
      font-size: 30px;
      line-height: 120%;
    }
    .text {
      font-family: "PT Serif", serif;
      font-weight: 400;
      font-size: 18px;
      line-height: 140%;
    }
  }
}

/* Blog Section */
.blog-sec {
  .item {
    &:nth-child(even):not(.cat-page-item) {
      .box {
        background-image: url("/assets/site/home/white-gypsum-wall-2-b288265e.png");
        .cat-time {
          color: #ffffff;
        }
        .img-colored {
          display: none;
        }
        .img-white {
          display: block;
        }
        .banner-title {
          background: #ffffff;
          color: #30b354;
        }
        .banner-subtitle {
          color: #ffffff;
        }
      }
    }
    .box {
      padding: 3rem 1rem;
      background-image: url("/assets/site/home/white-gypsum-wall-2-1-d8cb5d39.png");
      background-size: cover;
      border-radius: 12px;
      background-color: #ffffff;
      box-sizing: border-box;
      min-height: 382px;
      display: block;
      text-decoration: none;
      img {
        margin: 1rem 0 0 1rem;
        width: 165px;
        height: auto;
        object-fit: contain;
      }
      .img-white {
        display: none;
      }
      .cat-time {
        font-weight: 100;
        font-size: 14px;
        line-height: 16.15px;
        color: #1a455b;
        border-top: 1.5px solid #30b354;
        padding-top: 1rem;
      }
      .banner-title {
        background: #30b354;
        color: #ffffff;
        font-family: "PT Serif", serif;
        font-weight: 400;
        font-size: 22px;
        line-height: 140%;
        padding: 0.75rem 1rem;
        border-radius: 50px;
        margin: 1.5rem 0 0.5rem;
      }
      .banner-subtitle {
        font-family: "PT Serif", serif;
        font-weight: 300;
        font-size: 28px;
        line-height: 150%;
        color: #1a455b;
        min-height: 84px;
      }
    }
    .title {
      font-weight: 700;
      font-size: 18px;
      line-height: 140%;
      color: #0a3013;
      margin: 1rem 0 0.5rem;
      min-height: 51px;
      a {
        display: block;
        text-decoration: none;
        color: #0a3013 !important;
      }
    }
    .desc {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.5em;
      max-height: 4.5em; /* 3 lines * 1.5em */
      font-weight: 300;
      font-size: 16px;
      line-height: 140%;
      color: #676767;
      min-height: 68px;
    }
    .btn {
      margin: 0.5rem 0 0.5rem auto;
      font-weight: 600;
    }
  }
}

/* Clients Reviews Section */
.clients-reviews-sec {
  .clients-reviews-slider {
    .splide__slide {
      padding-top: 1.5rem;
    }
    .box {
      position: relative;
      background-color: #ffffff;
      border-radius: 16px;
      box-shadow: 0px 2px 7px 0px #0000001a;
      padding: 1.5rem 1rem;
      height: 100%;
      &::after {
        content: "";
        position: absolute;
        width: 2rem;
        height: 2rem;
        background-image: url("/assets/site/icons/quote-8eb125a7.svg");
        background-repeat: no-repeat;
        background-size: contain;
        top: -0.75rem;
        left: 2rem;
        transform: translateX(-50%);
      }
      .text {
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 1rem;
      }
      .name {
        position: relative;
        font-weight: 400;
        font-size: 14px;
        line-height: 160%;
        color: #000000;
        margin: 0;
        padding-inline-start: 2rem;
        &::after {
          content: "";
          position: absolute;
          width: 24px;
          height: 24px;
          margin-inline-end: 0.5rem;
          background-image: url("/assets/site/icons/user-circle-a2882861.svg");
          background-repeat: no-repeat;
          background-size: contain;
          left: 0;
        }
      }
    }

    .splide__pagination {
      bottom: 0;
      .splide__pagination__page {
        background: #c1e8cc;
        width: 20px;
        height: 8px;
        border-radius: 4px;
        opacity: 1;
        &.is-active {
          background: #30b354;
          width: 80px;
          transform: scale(1);
          opacity: 1;
        }
      }
    }
  }
}

/* Testimonial Section */
.testimonial-sec {
  margin-top: -5rem;
  .testimonial-slider {
    .splide__slide {
      display: flex;
      align-items: end;
    }
    .item {
      display: flex;
      align-items: flex-end;
      .text {
        font-size: 18px;
        line-height: 24px;
        max-height: 200px;
        overflow: auto;
      }
      .info {
        .name {
          font-weight: 700;
          font-size: 14px;
          line-height: 125%;
          color: #30b354;
          margin: 0;
          white-space: nowrap;
        }
        .sep {
          margin: 0 0.5rem;
          color: #c1e8cc;
        }
        .position {
          font-size: 14px;
          margin: 0;
        }
      }
    }
    .testimonial-arrows {
      position: absolute;
      bottom: 1rem;
      left: 33.3%;
      z-index: 2;
      .slide-counter {
        font-weight: 700;
        font-size: 14px;
        line-height: 100%;
        margin: 0 0.5rem;
        color: #30b354;
      }
      .testimonial-arrow {
        border: none;
        background: transparent;
        width: 24px;
        height: 24px;
        padding: 0;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
        &.testimonial-arrow--next {
          transform: rotate(0deg);
        }
        &.testimonial-arrow--prev {
          transform: rotate(180deg);
        }
      }
      .testimonial-arrow[disabled],
      .testimonial-arrow.disabled {
        opacity: 0.5 !important;
        pointer-events: none;
      }
    }
  }
}

/* FAQs Section */
.faqs-sec {
  .faq-container {
    position: relative;
    padding: 1rem 2rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #30b35333;
    cursor: pointer;
    .faq-question {
      font-weight: 500;
      font-size: 20px;
      line-height: 140%;
      padding-right: 1rem;
      color: #051208;
    }
    .faq-answer {
      font-weight: 300;
      font-size: 18px;
      line-height: 140%;
      color: #676767;
      height: 0;
      overflow: hidden;
      transition: all 0.3s;
    }
    &:after {
      content: "";
      position: absolute;
      right: 2rem;
      top: calc(1rem + 4px);
      width: 16px;
      height: 15px;
      background-image: url("/assets/site/icons/plus-3f16b396.svg");
      background-size: contain;
      background-repeat: no-repeat;
      transition: all 0.3s;
      pointer-events: none;
    }
    &.open {
      &:after {
        top: calc(1rem - 2px);
        transform: rotate(180deg);
        background-image: url("/assets/site/icons/minus-927e8e04.svg");
      }
      .faq-answer {
        padding-top: 1rem;
        height: auto;
      }
    }
  }
}







/* ***************** */
/* Responsive Styles */
/* ***************** */

@media (max-width: 768px) {
  .sec-title {
    font-size: 28px;
  }
  .sec-subtitle {
    font-size: 16px;
  }
  .hero-sec {
    .box {
      .content {
        .title {
          font-size: 28px;
        }
      }
    }
  }
}