/* Added fallbacks to help with CLS, feel free to remove if it doesn't help on your project */
/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
.intro {
  padding: 75px 0; }
  @media (min-width: 1025px) {
    .intro {
      padding: 100px 0; } }
  .intro .img-box {
    position: relative; }
    .intro .img-box .img {
      border-radius: 5px; }

.quality {
  position: relative; }
  .quality .box-container .box {
    background-color: #83D032; }
    .quality .box-container .box p,
    .quality .box-container .box h2 {
      color: #ffffff; }
    .quality .box-container .box .play-button {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-size: 18px;
      width: fit-content; }
      .quality .box-container .box .play-button i {
        border: 1px solid #FFFFFF;
        background-color: transparent;
        color: #ffffff;
        margin-right: 12px;
        height: 44px;
        width: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%; }
      .quality .box-container .box .play-button span {
        width: calc(100% - 46px); }
      .quality .box-container .box .play-button:hover {
        color: #08B5E7; }
        .quality .box-container .box .play-button:hover i {
          background-color: #08B5E7; }
    .quality .box-container .box .img {
      height: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      object-fit: cover; }

.community {
  padding: 75px 0; }
  @media (min-width: 1025px) {
    .community {
      padding: 100px 0; } }
  .community h2 {
    position: relative;
    display: flex; }
    .community h2::before {
      margin-right: 1rem;
      content: '';
      background-color: #83D032;
      width: 80px;
      height: 3px;
      top: 18px;
      position: relative;
      display: inline-block; }
  .community p {
    font-size: 18px; }
  .community .img-box {
    position: relative; }
    .community .img-box .img {
      border-radius: 5px; }

.gallery {
  padding: 0 0 75px 0; }
  @media (min-width: 1025px) {
    .gallery {
      padding: 0 0 100px 0; } }
  .gallery .top h2 {
    position: relative;
    padding-bottom: 2rem; }
    .gallery .top h2::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #83D032;
      width: 80px;
      height: 3px;
      margin: 0 auto; }
  .gallery .top p {
    font-size: 18px; }
  .gallery .gallery-slider .owl-stage {
    display: flex; }
  .gallery .gallery-slider .item {
    position: relative;
    height: 100%; }
    .gallery .gallery-slider .item .img {
      border-radius: 5px;
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      object-fit: cover;
      z-index: 1; }
    .gallery .gallery-slider .item .content-wrap {
      border-radius: 5px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 75px 45px;
      height: 100%;
      background: rgba(45, 45, 45, 0.7);
      transition: all ease-in-out 300ms;
      cursor: pointer; }
      @media (min-width: 769px) {
        .gallery .gallery-slider .item .content-wrap {
          padding: 100px 45px;
          opacity: 0; } }
      .gallery .gallery-slider .item .content-wrap h2 {
        font-weight: 700;
        margin-bottom: 1rem;
        color: #ffffff; }
      .gallery .gallery-slider .item .content-wrap p {
        color: #ffffff; }
      .gallery .gallery-slider .item .content-wrap i {
        height: 44px;
        width: 44px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto; }
      .gallery .gallery-slider .item .content-wrap:hover {
        opacity: 1; }
  .gallery .gallery-slider .owl-dots {
    margin-top: 2rem; }
    .gallery .gallery-slider .owl-dots button span {
      background: #E9EBF1;
      height: 26px;
      width: 26px;
      margin: 5px !important; }
    .gallery .gallery-slider .owl-dots button:hover span, .gallery .gallery-slider .owl-dots button.active span {
      background: #83D032; }
  .gallery .gallery-slider-wrap {
    position: relative; }
    .gallery .gallery-slider-wrap #gallery-nav-container {
      position: absolute;
      top: calc(50% - 32px);
      left: 0;
      right: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      z-index: 2; }
      @media (min-width: 1329px) {
        .gallery .gallery-slider-wrap #gallery-nav-container {
          max-width: 1480px; } }
      .gallery .gallery-slider-wrap #gallery-nav-container button {
        border: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9EBF1;
        height: 44px;
        width: 44px;
        border-radius: 50%; }
        @media (min-width: 1025px) {
          .gallery .gallery-slider-wrap #gallery-nav-container button {
            height: 65px;
            width: 65px; } }
        .gallery .gallery-slider-wrap #gallery-nav-container button:first-of-type {
          margin-right: 1rem; }
        .gallery .gallery-slider-wrap #gallery-nav-container button i {
          transform-origin: center;
          transform: rotate(90deg);
          font-size: 16px;
          color: #2D2D2D; }
        .gallery .gallery-slider-wrap #gallery-nav-container button.disabled i {
          color: #b1b1b1; }
    .gallery .gallery-slider-wrap.disabled {
      display: none; }

.cta {
  padding: 0 0 75px 0; }
  @media (min-width: 641px) {
    .cta {
      padding: 0 0 150px 0; } }
  @media (min-width: 1025px) {
    .cta {
      padding: 0 0 150px 0; } }
  .cta p {
    font-size: 18px; }