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

:root {

  --clr-main-dark: #0e2a46;
  --clr-main-dark-secondary: #333931;
  --clr-additional-dark: #17254e;

  --clr-footer-bottom: #222;

  --clr-purple: #704fe6;
  --clr-yellow: #ffd25d;

  --clr-white: #fff;

  --clr-light-main: #FCDCDB;
  --clr-light-secondary: #e9e2ff;
  --clr-light-additional: #e3dbff;

  --clr-red-main: #EF4065;
  --clr-red-secondary: #d43657;

  --core-header-index: 100;

  --border-radius-main: 200px;
  --border-radius-basic: 16px;
  --border-radius-secondary: 20px;
  --border-raidius-minimal: 5px;

  --min-header-top-heigh: 50px;
  --min-header-bottom-heigh: 83px;

  --header-height: calc(var(--min-header-top-heigh) + var(--min-header-bottom-heigh));

  --global-inline-padding: 27px;

  --large-container: 1586px;
  --container: 1320px;

  --shadow-basic: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

html,
body {
  font-family: Inter, sans-serif;
}

a {
  text-decoration: none;
}


.mobileview-caller-container {
  display: none;
  height: 100%;
}

.header {
  left: 0;
  right: 0;
  top: 0;
  position: fixed;
  z-index: var(--core-header-index);
  box-shadow: var(--shadow-basic);

  .top {
    background: var(--clr-additional-dark);
    height: var(--min-header-top-heigh);

    .inner-container {
      width: 100%;
      max-width: 1320px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .bottom {
    height: var(--min-header-bottom-heigh);
    background: linear-gradient(0deg, #fff 0%, #fff 100%), #fff;
    position: relative;

    .inner-container {
      padding-right: 27px !important;
      height: 100% !important;
    }

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

    .inner-container .right {
      flex: 1;
      gap: 16px;
    }
  }

  .logo-wrapper {
    padding-top: 12px;
    padding-right: 109px;
  }

  .logo {
    display: block;
    width: 175px;
    height: 71px;
  }

  .logo-image {
    width: 100%;
  }
}

.g-inline-padding {
  padding-inline: var(--global-inline-padding);
}

.content-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;

  &.large {
    max-width: var(--large-container);
  }
}

.contacts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;

  .contacts-list-item {
    height: 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.21);
    padding-right: 18px;
    min-width: 205px;
  }

  .contacts-list-link {
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    svg {
      width: 20px;
      height: 20px;
      fill: var(--clr-yellow);

      path {
        fill: var(--clr-yellow);
      }
    }

    span {
      color: var(--clr-white);
      font-family: Inter;
      font-size: 17px;
      font-style: normal;
      font-weight: 400;
      line-height: 17px;
      padding-left: 10px;
    }
  }
}

.socials {
  height: 50px;
  background: var(--clr-white);
  list-style: none;
  margin: 0;
  padding: 0 16px 0 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;

  .socials-item {
    padding: 4px 6px;

    .socials-link {
      width: 24px;
      aspect-ratio: 1/1;
      padding: 2px;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;

      svg {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.menu-btn {
  border: none;
  outline: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-light-gray, #e2e2e2);
  gap: 10px;
  padding: 6px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.menu-btn span {
  width: 100%;
  height: 2px;
  background-color: var(--clr-main-dark);
  display: block;
  margin: 4px auto;
  border-radius: 4px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

.menu-btn.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-btn.is-active span:nth-child(2) {
  opacity: 0;
  width: 0%;
}

.menu-btn.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

#menu-btn {
  display: none;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  display: flex;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.mobile-menu.open {
  pointer-events: auto;
  opacity: 1;
}

.mobile-menu-backdrop {
  flex: 1;
  background: rgba(9, 13, 22, 0.45);
}

.mobile-menu-panel {
  width: min(360px, 100vw);
  background-color: var(--clr-white);
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  padding: 32px 24px 48px;
  gap: 24px;
}

.mobile-menu.open .mobile-menu-panel {
  transform: translateX(0);
}

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

.mobile-menu-header .logo-image {
  width: 120px;
  height: auto;
}

.menu-close-btn {
  border: none;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 1px solid var(--clr-light-gray, #e2e2e2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.menu-close-btn span {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: var(--clr-main-dark);
  border-radius: 4px;
}

.menu-close-btn span:nth-child(1) {
  transform: rotate(45deg);
}

.menu-close-btn span:nth-child(2) {
  transform: rotate(-45deg);
}

.mobile-menu-body {
  height: 100%;
}

.mobile-menu-body,
.mobile-menu-body .bottom-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;

  .site-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.mobile-menu-body .bottom-box {
  padding-bottom: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--clr-light-gray, #e2e2e2);
}

.mobile-menu-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}

.contacts-list-link {
  font-size: 20px;
}

.mobile-menu-nav .site-menu-link {
  width: 100%;
  display: block;
  text-align: left;
  color: var(--clr-main-dark);
  font-size: 22px;
}

.mobile-menu-cta {
  width: 100%;
  justify-content: center;
}

.mobile-menu-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}

.mobile-menu-contacts a {
  color: var(--clr-main-dark);
  text-decoration: none;
}

.mobile-menu-socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
  font-size: 14px;
}

.mobile-menu-socials a {
  color: var(--clr-main-dark);
  text-decoration: none;
  font-size: 17px;
}

body.mobile-menu-open {
  overflow: hidden;
}

.site-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;

  .site-menu-item {
    padding-block: 27px;
    padding-inline: 5px;
  }

  .site-menu-link {
    color: var(--clr-main-dark);
    text-decoration: none;
    font-family: Inter;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    text-transform: capitalize;
    border-radius: 100px;
    border: 1px solid transparent;
    height: 31px;
    padding: 7px 15.5px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
  }

  .site-menu-link.active {
    border: 1px solid var(--clr-red-main);
    color: var(--clr-red-main);
  }

  .site-menu-link:hover,
  .site-menu-link:focus {
    color: var(--clr-red-main);
  }
}

.fluid-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* BUTTONS */

.site-btn {
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.order-btn-wrapper {
  position: absolute;
  z-index: 1;
  right: 27px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.order-btn {
  height: 58px;
  padding-left: 18px;
  padding-right: 6.2px;
  border-radius: var(--border-radius-main);
  box-shadow: var(--shadow-basic);
  gap: 11px;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: -0.15px;
  text-transform: capitalize;

  display: flex;
  justify-content: center;
  align-items: center;

  .inner-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    aspect-ratio: 1/1;
    padding: 17px 16.5px 19px 16.5px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
  }
}


.order-btn.xlarge {
  height: 84px;
  padding: 12.75px 12.97px 13.25px 25px;
  gap: 8.8px;
  border-radius: var(--border-radius-main);
  background: var(--clr-red-main);
  min-width: 203px;

  span {
    color: var(--clr-white);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 58px;
    letter-spacing: -0.15px;
    text-transform: capitalize;
  }

  .inner-icon {
    width: 58px;
    height: 58px;
    background: var(--clr-light-main);
    scale: 1;

    svg {
      width: 100%;
    }
  }
}

.order-btn.xlarge:hover,
.order-btn.xlarge:focus {
  background: var(--clr-red-secondary);

  .inner-icon {
    background: rgba(239, 64, 101, 0.85);
    scale: 0.8;
  }
}

.order-btn.variant-secondary {
  background: var(--clr-light-secondary);
  color: var(--clr-purple);

  .inner-icon {
    background: var(--clr-light-additional);
    scale: 1;

    svg {
      fill: var(--clr-purple);

      path {
        stroke: var(--clr-purple);
      }
    }
  }
}

.order-btn.variant-secondary:hover,
.order-btn.variant-secondary:focus {
  background: var(--clr-light-additional);
  color: var(--clr-purple);

  .inner-icon {
    background: var(--clr-light-secondary);
    scale: 0.8;
  }
}

.order-btn.variant-primary {
  background: rgba(239, 64, 101, 0.85);
  color: var(--clr-white);

  .inner-icon {
    background: var(--clr-red-secondary);
    scale: 1;
  }
}

.order-btn.variant-primary:hover,
.order-btn.variant-primary:focus {
  background: var(--clr-red-secondary);
  color: var(--clr-white);

  .inner-icon {
    background: rgba(239, 64, 101, 0.85);
    scale: 0.8;
  }
}

.order-btn.variant-primary-reverse {
  background: rgba(255, 50, 50, 0.67);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 200px;
  color: var(--clr-white);

  .inner-icon {
    background: var(--clr-light-main);
    scale: 1;
  }
}

.order-btn.variant-primary-reverse:hover,
.order-btn.variant-primary-reverse:focus {
  background: rgba(239, 64, 101, 0.85);

  .inner-icon {
    background: rgba(255, 50, 50, 0.67);
    scale: 0.8;
  }
}

.order-btn.order-btn-middle {
  min-width: 203px;
  height: 58px;
  gap: 20px;

  span {
    font-size: 16px;
    line-height: 58px;
    letter-spacing: -0.15px;
    text-transform: capitalize;
    padding-left: 65px;
    padding-right: 7px;
  }
}

.order-btn.order-btn-small {
  gap: 12px;
  height: 49px;
  padding-left: 16px;
  padding-right: 7px;
  border-radius: var(--border-radius-main);

  span {
    font-size: 20px;
    line-height: 58px;
    letter-spacing: -0.15px;
  }

  .inner-icon {
    width: 40px;
    height: 40px;
    padding: 12px 11.5px 14px 11.5px;
  }
}

.site-tab {
  border-radius: var(--border-raidius-minimal);
  height: 32px;
  padding: 0 21.656px 0 22px;
  background: var(--clr-light-secondary);
  display: inline-block;
  color: var(--clr-purple);
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-basic);
}

.site-tab.purple {
  color: var(--clr-purple);
  background: var(--clr-light-secondary);
}

.site-tab.green {
  color: #2fc7a1;
  background: rgba(47, 199, 161, 0.12);
}

.site-tab.roze {
  color: #FE543D;
  background: #FCDCDB;
}


.footer {
  .top {
    padding-top: 46px;
    padding-bottom: 54px;
    background-image: url(../images/footer/footer-bgcover.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    .content-container {
      display: flex;
      flex-direction: column;
      gap: 28px;

      .content {
        width: 100%;
        max-width: 384px;

        p,
        a {
          color: var(--clr-white);
          font-family: Inter;
          font-size: 17px;
          font-style: normal;
          font-weight: 400;
          line-height: 32px;
        }
      }
    }

    .logo-wrapper {
      max-width: 230px;
    }
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;

    .right-box {
      padding-top: 40px;
      flex: 1;
      display: flex;
      justify-content: space-between;
      padding-left: 200px;
      gap: 32px;
    }

    .footer-socials-list {
      list-style: none;
      margin: 0;
      padding: 0;
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: stretch;

      .footer-socials-list-item {
        padding: 0;
      }

      .footer-social-link:hover {
        background-color: var(--clr-red-main);
      }

      .footer-social-link {
        text-decoration: none;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        background: var(--clr-light-secondary);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--clr-purple);
        transition: all 0.3s ease-in-out;

        span {
          width: 17px;
          height: 17px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .outlinks-list {
      margin: 0;
      padding: 0;
      list-style: none;

      .outlinks-list-item {
        padding: 0;
        margin: 0;
      }

      .outlinks-list-link:hover {
        span {
          color: var(--clr-red-main);
        }

        .icon {
          transform: translateX(6px);

          svg path {
            fill: var(--clr-red-main);
          }
        }
      }

      .outlinks-list-link {
        display: flex;
        justify-content: flex-start;
        align-items: start;
        padding-block: 10px;
        gap: 16px;

        .icon {
          width: 23px;
          height: 30px;
          transform: translateX(0);
          transition: all 0.3s ease-in-out;

          svg {
            width: 100%;

            path {
              fill: #FFF;
            }
          }
        }

        span {
          color: #FFF;
          font-family: Inter;
          transition: color 0.3s ease-in-out;
          font-size: 17px;
          font-style: normal;
          font-weight: 400;
          line-height: 32px;
          text-transform: capitalize;
        }
      }
    }

    .menu-item-box {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .menu-item-box-gallery {
      max-width: 277px;
      width: 100%;
    }

    .menu-item-title {
      color: var(--clr-white);
      font-family: Inter;
      font-size: 22px;
      font-style: normal;
      font-weight: 700;
      line-height: 24.2px;
      text-transform: capitalize;
    }
  }

  .footer-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: stretch;

    .footer-gallery-item {
      position: relative;
      border-radius: var(--border-raidius-minimal);
      overflow: hidden;
      aspect-ratio: 1/1;
      border: 1px solid transparent;
      transition: border 0.3s ease-in-out;
    }

    .footer-gallery-item:hover {
      border: 1px solid var(--clr-red-main);
    }
  }

  .bottom {
    background: var(--clr-footer-bottom);
    padding-block: 20px;
  }
}

.copyright {
  color: var(--clr-white);
  text-align: center;
  font-family: Inter;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 32.3px;

  span {
    padding-inline: 12px;
  }
}


.pattern-block {
  background: #FDF8FF;
  background-image: radial-gradient(#999 4%, transparent 0);
  background-size: 32px 32px;
}

/* h SECTION  */
.hero-section {
  /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */
  overflow: hidden;

  .hero-section-inner {
    padding-top: 160px;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    position: relative;

    .campers-container {
      border-radius: 12px;
      background: #FFF;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
      padding: 32px;
      display: flex;
      flex-direction: column;
      position: absolute;
      bottom: 40px;
      left: 540px;
      gap: 20px;
      z-index: 1;

      .top {
        h3 {
          color: #EF4562;
          font-family: Inter;
          font-size: 30px;
          font-style: normal;
          font-weight: 400;
          line-height: 32px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          span {
            color: #17254E;
            padding-left: 6px;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 32px;
          }
        }
      }

      .bottom {
        width: 170px;
        height: 50px;
        position: relative;
      }
    }
  }

  .hero-section-inner:after {
    content: "";
    display: block;
    width: 355px;
    height: 119px;
    position: absolute;
    background-image: url(../images/icons/heroline.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 32px;
    left: 167px;
    z-index: 0;

  }


  .hero-content-container {
    width: 100%;
    max-width: 668px;
    position: relative;
    font-family: Inter;
    position: relative;
    z-index: 2;
    font-style: normal;

    .hero-title {
      color: var(--clr-main-dark);
      font-size: 55px;
      font-weight: 400;
      line-height: 60px;
      text-transform: uppercase;
      margin-bottom: 0px;
    }

    .hero-description {
      color: var(--clr-main-dark-secondary);
      font-size: 15px;
      font-weight: 400;
      line-height: 26px;
      margin: 24px 0 0 0;
      padding: 0;
    }

    .hero-action-link {
      margin-top: 72px;
      display: block;
    }
  }

  .hero-section-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: flex-end;

    .cover-image-container {
      width: 42.96%;
      height: 100%;
      padding-top: calc(var(--min-header-top-heigh) + var(--min-header-bottom-heigh) + 32px);
      padding-bottom: 32px;

      .cover-image-wrapper {
        width: 100%;
        height: 100%;
        padding-left: 32px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;

        .image-container {
          position: relative;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .hero-section-inner {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    z-index: 2;
  }
}

.categories-section,
.aboutus-section {
  padding-block: 70px;
}

.site-tab-wrapper {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;

  &.left {
    justify-content: flex-start;
  }
}

.section-title h2,
.section-title-md {
  color: var(--clr-main-dark);
  text-align: center;
  font-style: normal;
}

.section-title h1 {
  font-family: Montserrat;
  font-size: 64px;
  font-weight: 400;
  line-height: 100%;
  text-transform: capitalize;
  text-align: center;
}

.section-title h2 {
  font-family: Montserrat;
  font-size: 60px;
  font-weight: 400;
  line-height: 100%;
  text-transform: capitalize;
}

.section-title.left h2,
.section-title-md.left h2 {
  text-align: left;
}

.siction-title-and-btn-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  .left {
    flex: 1;
  }
}

.section-title-md h2 {
  font-family: Inter;
  font-size: 45px;
  font-weight: 700;
  line-height: 100%;
  font-variant: all-small-caps;
}

.categories-grid-container {
  padding-top: 40px;
}

.categories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 86px 74px;
  align-items: stretch;
  justify-items: stretch;
}

.categories-grid-item {
  height: 100%;
  padding-block: 32px;
  padding-inline: 26px;
  border-radius: 10px;
  box-shadow: var(--shadow-basic);

  .inner-container {
    .top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .headline {
      flex: 1;
      gap: 11px;
      display: flex;
      justify-content: space-between;
      min-height: 80px;

      .icon-box {
        width: 80px;
        height: 80px;
        position: relative;
      }

      .card-title-wrapper {
        flex: 1;
        color: var(--clr-main-dark);
        font-family: Inter;

        .card-description {
          font-size: 22px;
          font-style: normal;
          font-weight: 700;
          line-height: 24.2px;
          margin-bottom: 11px;
        }

        .card-title {
          font-size: 22px;
          font-style: normal;
          font-weight: 700;
          line-height: 24.2px;
          margin-bottom: 0px;
        }
      }
    }

    .bottom {
      padding-left: 95px;
      padding-right: 87px;
      padding-bottom: 64px;
    }

    .content {
      padding: 0;
    }
  }
}

.bg-color-1 {
  background: rgba(255, 210, 93, 0.5);
}

.bg-color-2 {
  background: #dbe8ff;
}

.bg-color-3 {
  background: rgba(47, 199, 161, 0.46);
}

.bg-color-4 {
  background: rgba(255, 50, 50, 0.36);
}

.why-section {
  padding-top: 76px;
  padding-bottom: 100px;
}

.conter-widget--wrapper {
  padding-top: 10px;
  padding-bottom: 100px;
  overflow: hidden;
}

@property --from {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@keyframes counter {
  to {
    --from: var(--to, 100);
  }
}

.conter-widget {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--border-radius-main);
  background-image: url(../images/widgets/counter/counter-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-block: 56px;
  padding-inline: 80px;
  box-shadow: var(--shadow-basic);

  .conter-widget-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: stretch;
    justify-items: stretch;
    gap: 48px;
  }

  .counter-widget-item {
    .inner-container {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      height: 100%;

      .icon-box {
        width: 78px;
        height: 78px;
        padding: 20px;
        border-radius: 50%;
        background-color: var(--clr-white);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .inner,
        svg {
          width: 100%;
          height: 100%;
          position: relative;
        }
      }

      .content {
        flex: 1;

        .count-value {
          transition: --from 1s;
          counter-reset: int var(--from);

          &::after {
            content: counter(int);
          }
        }

        .count-value.animate {
          animation: counter var(--time, 1000) forwards ease-in-out;
        }

        h3 {
          color: var(--clr-white);
          font-family: Inter;
          font-size: 39px;
          font-style: normal;
          font-weight: 700;
          line-height: 39px;
          text-transform: capitalize;
        }

        p {
          color: var(--clr-white);
          font-family: Inter;
          font-size: 17px;
          font-style: normal;
          font-weight: 400;
          line-height: 17px;
          text-transform: capitalize;
        }
      }
    }
  }
}

/* SWIPER BASICS */
.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.reviews-section {
  padding-top: 86px;
  padding-bottom: 225px;
  overflow: hidden;
  background: url("../images/widgets/reviews/reviews-background.png") no-repeat center top / cover;

  .custom-swiper-container {
    padding-top: 40px;
  }

  .swiper-pagination,
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }

  .views-section-swiper {
    padding-top: 30px;
    padding-bottom: 80px;

    .swiper-slide {
      position: relative;
      padding-left: 32px;
      padding-right: 56px;
      padding-block: 32px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 300px;
      border-radius: var(--border-radius-secondary);
      background: transparent;
      border: 1px solid var(--clr-additional-dark);
      box-shadow: var(--shadow-basic);


      .content-container {
        display: flex;
        flex-direction: column;
        gap: 18px;
        position: relative;
        z-index: 3;
      }

      p {
        color: var(--clr-main-dark-secondary);
        text-align: left;
        font-family: Inter;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 32.3px;
      }

      h4,
      h3 {
        color: var(--clr-main-dark);
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        text-align: left;
        font-weight: 700;
        line-height: 22px;
      }

      &::before {
        content: "";
        position: absolute;
        display: block;
        top: -30px;
        left: -20px;
        background-image: url(../images/widgets/reviews/text-attr.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 70px;
        height: 40px;
      }

      &::after {
        content: "";
        position: absolute;
        display: block;
        z-index: 0;
        inset: 0;

        background-color: var(--clr-white);
        border-radius: var(--border-radius-secondary);
        opacity: 0.3;
      }
    }
  }
}

.lastcamps-section {
  padding-top: 70px;
  padding-bottom: 46px;
  background: linear-gradient(180deg, #f2f2f2 0%, rgba(242, 242, 242, 0) 100%);
}

.camps-grid-container {
  padding-top: 76px;
}

.camps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  justify-items: stretch;
  gap: 24px;
  padding-top: 40px;

  .camp {
    padding: 30px 30px 40px 30px;
    border-radius: var(--border-radius-secondary);
    background-color: #fff;
    box-shadow: var(--shadow-basic);

    .inner-container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 46px;

      .cover-image {
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 20px;

        &::before {
          content: "";
          display: block;
          padding-top: 57%;
        }
      }

      .content {
        display: flex;
        flex-direction: column;
        gap: 16px;

        h3 {
          color: var(--clr-main-dark);
          font-family: Inter;
          font-size: 19px;
          font-style: normal;
          font-weight: 600;
          line-height: 26.6px;
        }

        p {
          color: var(--clr-main-dark-secondary);
          font-family: Inter;
          font-size: 17px;
          font-style: normal;
          font-weight: 400;
          line-height: 32.3px;
        }
      }
    }
  }
}

.camp-booking-container {
  position: relative;
}

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

.duallsection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 40px;

  .side {
    padding: 0;
  }
}

.anniversary-bottom-image {
  position: relative;
  width: 100%;
  border-radius: var(--border-radius-basic);
  overflow: hidden;
  margin-top: 32px;

  &::before {
    content: "";
    display: block;
    padding-top: 58%;
  }
}

.anniversary-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding-top: 142px;
  min-height: 244px;
  padding-right: 10%;

  .square-coverimage {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-basic);
    box-shadow: var(--shadow-basic);

    &::before {
      content: "";
      display: block;
      padding-top: 100%;
    }
  }

  .duallimages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 32px;

    .side {
      padding: 0px;

      .inner {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;

        .special-wrapper {
          width: 100%;
          max-width: 90%;
        }

        .special-bg {
          position: absolute;
          z-index: 0;
          top: 0;
          right: 0;
          left: 5%;
          bottom: 5%;
          /* background-image: url(../images/pages/home-page/about-us/dots-cover-imge.png);
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat; */

          /* background: #FDF8FF; */
          background-image: radial-gradient(#999 4%, transparent 0);
          background-size: 32px 32px;
        }
      }

      .content-to-bootom {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
    }
  }

  .years-box {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 180px;
    width: 244px;
    height: 244px;
    box-shadow: var(--shadow-basic);
    border-radius: 50%;
    border: 5px solid var(--clr-white);
    background: rgba(239, 64, 101, 0.85);
    color: var(--clr-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 11px;
    font-family: Inter;
    font-style: normal;
    text-align: center;
    line-height: 32px;

    h3 {
      font-size: 50px;
      font-weight: 700;
    }

    p {
      font-size: 25px;
      font-weight: 400;
    }
  }
}

.why-us-section,
.about-us-section {
  padding-top: 80px;
  padding-bottom: 90px;
}

.section-content-wrapper {
  padding-block: 64px;
}

.pt-32 {
  padding-top: 40px;
}

.pb-32 {
  padding-bottom: 40px;
}

.whyus-picture-container {
  flex: 1;
  position: relative;
  padding-top: 80px;
  padding-left: 56px;
  padding-right: 80px;
  min-height: 270px;

  .whyus-picture {
    position: relative;
    z-index: 2;

    img {
      border-radius: 16px;
      overflow: hidden;

    }

    /* border-radius: 16px; */
  }

  &::after {
    content: "";
    display: block;
    width: 277px;
    height: 271px;
    position: absolute;
    background-image: radial-gradient(#999 4%, transparent 0);
    background-size: 32px 32px;
    top: 0;
    right: 0;
    z-index: 1;
  }
}

.section-content-boxed-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 20px;

  .item {
    border-radius: 8px;
    background: rgba(239, 64, 101, 0.70);
    padding: 32px 24px;
    color: #FFF;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: lowercase;

    .inner {
      position: relative;
      display: flex;
      padding-left: 18px;

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 6px;
        left: 6px;
        width: 4px !important;
        height: 4px !important;
        background-color: #FFF;
      }
    }
  }
}

.text-content {
  width: 100%;
  color: var(--clr-main-dark-secondary);
  font-family: Inter;
  font-style: normal;
  font-weight: 400;

  p {
    font-size: 20px;
    line-height: 32px;
  }

  h3 {
    font-size: 32px;
    line-height: 40px;
  }
}


.page-heading-top {
  margin-top: var(--header-height);
  padding-bottom: 60px;
}

.pagehead-title {
  color: #0E2A46;
  text-align: center;
  font-family: 'Inter';
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 66px;
  text-transform: uppercase;
}

.pagehead-description {
  display: inline-block;
  margin-top: 48px;
  color: #000;
  font-family: 'Inter';
  font-size: 24px;
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: 66px;
  text-transform: uppercase;
}

.choose-journy-section {
  padding-top: 90px;
  padding-bottom: 120px;
  background-color: #2fc7a1;
}

.joinus-heading-seaction {
  padding-top: 70px;
  padding-bottom: 60px;

  .image-container {
    position: relative;
    width: 100%;

    &::before {
      content: "";
      display: block;
      position: absolute;
      z-index: 1;
      inset: 0;
      background-color: transparent;
      border: 4px solid var(--clr-red-main);
      opacity: 0.8;
      border-radius: 4px;
    }
  }

  .duallsection-grid {
    gap: 6px;
    min-height: 130px;
    position: relative;

    .side.left {
      padding-left: 22%;
    }

    .side.right {
      padding-left: 16%;
    }

    &::before {
      content: "";
      display: block;
      position: absolute;
      z-index: 0;
      left: 10px;
      top: 120px;
      width: 77px;
      height: 85px;
      background-image: url(../images/icons/dots.svg);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}

.joinus-widget-grid {
  padding-top: 74px;

  .joinus-widget-side-inner {
    border-radius: 5px;
    width: 100%;
    height: 100%;
    position: relative;
    min-height: 350px;
    padding: 32px;
    overflow: hidden;

    .image-container {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 350px;
      height: 350px;
      z-index: 0;

      .inner {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      max-width: 280px;
      align-items: start;
      height: 100%;
      gap: 18px;
      position: relative;
      z-index: 2;

      .title,
      .description {
        color: #FFF;
        font-family: Inter;
        font-size: 20px;
        font-style: normal;
        line-height: 32px;
        text-transform: capitalize;
      }

      .description {

        font-weight: 700;

      }

      .title {
        font-weight: 400;
      }
    }
  }


  .side:nth-child(1) {
    .joinus-widget-side-inner {
      background: #FCDCDB;
    }
  }

  .side:nth-child(2) {
    .joinus-widget-side-inner {
      background: rgba(47, 199, 161, 0.46);
    }
  }
}

.journy-grid {
  display: grid;
  margin-top: 74px;
  gap: 24px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: stretch;

  .journy-item {
    background: #FFF;
    padding-block: 32px;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    box-shadow: var(--shadow-basic);
    border-radius: var(--border-radius-secondary);
    text-align: center;
    font-family: Inter;
    font-style: normal;

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

    .title {
      color: #0E2A46;
      font-size: 22px;
      font-weight: 700;
      line-height: 110%;
    }

    .description {
      color: #4D5756;
      font-size: 16px;
      font-weight: 400;
      line-height: 100%;
      margin: 32px 0 0 0;
    }

    .icon-box {
      width: 108px;
      height: 108px;
      border-radius: 50%;
      margin: 0 auto;
      position: relative;
      border: 1px dashed;
      margin-bottom: 24px;

      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        background-color: #2FC7A1;
        border-radius: 50%;
        inset: 10px;
      }

    }
  }
}

.joinus-widget-section {
  padding-top: 70px;
  padding-bottom: 120px;
}

.page-heading-section {
  padding-top: 70px;
  padding-bottom: 32px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 20% 40%,
      rgba(255, 200, 200, 0.55),
      transparent 70%),
    radial-gradient(circle at 80% 30%,
      rgba(210, 210, 255, 0.4),
      transparent 70%),
    linear-gradient(90deg,
      #f7d9d5 0%,
      #e8d9f5 50%,
      #d6ddfa 100%);
}

.page-heading-section .content-container {
  position: relative;
  z-index: 2;
}

.page-heading-section::before,
.page-heading-section::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-heading-section::before {
  width: 66px;
  height: 65px;
  top: 56px;
  right: 58px;
  background-image: url(../images/icons/splash.svg);
}

.page-heading-section::after {
  top: 74px;
  left: 20px;
  width: 77px;
  height: 85px;
  background-image: url(../images/icons/dots.svg);
}

.document-section {
  padding-block: 40px;
}

.incamp-section {
  padding-block: 70px;
}

.incamp-fetures-grid {
  display: grid;
  width: 100%;
  padding-top: 74px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;

  .incamp-feture {
    border-radius: 5px;
    border: 1px dashed #704FE6;
    background: #F4F5F8;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 24px;

    font-family: Inter;
    font-style: normal;
    line-height: 150%;
    color: #0E2A46;

    .cover-image {
      width: 100%;
      position: relative;
      border-radius: var(--border-raidius-minimal);
      overflow: hidden;

      &::before {
        content: "";
        display: block;
        padding-top: 58%;
      }
    }

    .description {
      font-size: 20px;
      font-family: Inter;
      font-weight: 400;
      font-variant: small-caps;
      margin: 10px 0 0 0;
    }

    .title {
      font-size: 22px;
      font-weight: 600;
      text-transform: capitalize;
    }
  }
}

.action-call-link {
  display: none;
}


.notfound-section {
  min-height: 100dvh;

  .notfound-content,
  .content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .notfound-content {
    gap: 24px;
    margin: 0 auto;
  }

  .content-container {
    padding-block: 160px;
    justify-content: center;
    height: 100%;
  }

  h1 {
    position: relative;
    padding-block: 32px;
    animation: floating 3s ease-in-out infinite;
    color: #0E2A46;
    font-family: Inter;
    text-align: center;
    font-size: 78px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px;
    text-transform: uppercase;
  }

  .notfound-description {
    color: #0E2A46;
    font-family: Inter;
    font-size: 18px;
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
  }
}


.campslist-section {
  padding-block: 40px;
  overflow: hidden;
}

.capmblok-container {
  padding-bottom: 32px;
  padding-left: 32px;

  .camp-title {
    color: #0E2A46;
    font-size: 98px;
    font-family: "Birthstone", cursive;
    letter-spacing: 3px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
  }

  .capmblok-grid {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    .content-box {
      padding-top: 64px;
      width: 44%;

      .htmlcontent {
        margin-bottom: 48px;
        position: relative;
        z-index: 2;
        font-family: 'Montserrat';
      }
    }

    .content-box::before {
      content: "";
      display: block;
      border: 260px;
      width: 176px;
      height: 168px;
      margin-bottom: 10px;
      background-image: url(../images/icons/hat.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .gallery-box {
      flex: 1;
      padding-left: 124px;
    }
  }


}

@keyframes floating {
  0% {
    transform: translate3d(0, 0, 0);
  }

  45% {
    transform: translate3d(0, -10%, 0);
  }

  55% {
    transform: translate3d(0, -10%, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}


@media only screen and (max-width: 1600px) {
  :root {
    --global-inline-padding: 32px;
    --large-container: 1280px;
    --container: 1200px;
  }

  .header {
    .logo-wrapper {
      padding-right: 64px;
    }

    .site-menu {
      gap: 12px;
    }
  }

  .categories-grid {
    gap: 32px;
  }

  .categories-grid-item {
    & .inner-container {
      & .headline {
        .icon-box {
          width: 60px;
          height: 60px;
        }
      }
    }
  }

  .categories-grid-item {
    & .inner-container {
      .bottom {
        padding-left: 75px;
        padding-right: 40px;
        padding-bottom: 40px;
        padding-top: 24px;
      }
    }
  }

  .section-content-wrapper {
    padding-block: 40px;
  }
}


@media only screen and (max-width: 1400px) {
  :root {
    --global-inline-padding: 32px;
    --large-container: 1280px;
    --container: 1200px;
  }

  .hero-content-container .hero-description {
    max-width: 560px;
  }


  .page-heading-section {

    &::before {
      width: 36.3px;
      height: 35.75px;
      top: 30.8px;
      right: 31.9px;
    }

    &::after {
      top: 40.7px;
      left: 11px;
      width: 42.35px;
      height: 46.75px;
    }
  }



  .pagehead-title {
    font-size: 46px;
    line-height: normal;
  }

  .pagehead-description {
    margin-top: 32px;
    font-size: 20px;
    line-height: normal;
  }

  .header {
    .logo {
      width: 140px;
      height: 56.8px;
    }

    .site-menu {
      gap: 12px;

      .site-menu-item {
        padding-inline: 2px;
      }

      .site-menu-link {
        font-size: 16px;
        border-radius: 100px;
        padding: 6px 12px;
      }
    }
  }


  .footer .footer-nav .right-box {
    padding-left: 120px;
  }


  .categories-grid {
    gap: 32px;
  }

  .categories-grid-item {
    & .inner-container {
      .bottom {
        padding-left: 71px;
        padding-right: 32px;
        padding-bottom: 32px;
      }
    }
  }

  .section-title h2 {
    font-size: 56px;
    line-height: 100%;
  }

  .section-title h1 {
    font-size: 60px;
  }
}


@media only screen and (max-width: 1280px) {
  :root {
    --global-inline-padding: 40px;
    --large-container: 1280px;
    --container: 1200px;
  }

  .categories-grid-item {
    padding-block: 32px;
    padding-inline: 24px;

    .inner-container {
      .top {
        flex-direction: column-reverse;
        align-items: start;
        text-align: left;
        gap: 24px;

        .camp-booking-container {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        .headline {
          width: 100%;
        }
      }
    }
  }

  .conter-widget {
    padding-block: 48px;
    padding-inline: 64px;

    .conter-widget-inner {
      gap: 32px;

      .inner-container {
        .icon-box {
          width: 64px;
          height: 64px;
          padding: 16px;
        }

        .content {
          h3 {
            font-size: 30px;
            line-height: 100%;
          }

          p {
            font-size: 15px;
            line-height: 100%;

          }
        }
      }
    }
  }

  .why-section {
    padding-block: 40px;
  }

  .reviews-section {
    padding-top: 60px;
    padding-bottom: 120px
  }

  .lastcamps-section {
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .camps-grid-container {
    padding-top: 24px;
  }


  .incamp-fetures-grid {
    padding-top: 32px;
    grid-template-columns: 1fr 1fr;
  }

  .choose-journy-section {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}

@media only screen and (max-width: 1200px) {

  .why-us-section,
  .about-us-section {
    padding-block: 40px;
  }

  .pagehead-title {
    font-size: 42px;
  }

  .pagehead-description {
    margin-top: 32px;
    font-size: 18px;
  }

  .journy-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section-content-wrapper {
    width: 100%;
    max-width: 860px;
  }

  .content-container {
    max-width: 900px;
  }

  .header {
    .site-menu {
      display: none;
    }

    .content-container {
      max-width: 100%;
    }

    .bottom .inner-container {
      padding-right: 0px !important;

      .right {
        justify-content: flex-end;
        align-items: center;
      }
    }

    #menu-btn {
      display: block;
    }

    .order-btn-wrapper {
      display: none;
    }
  }

  .footer .top .logo-wrapper {
    width: 140px;
    height: 56.8px;

    img {
      width: 100%;
    }
  }

  .footer .footer-nav {
    flex-wrap: wrap-reverse;
    gap: 40px;

    .content-box {
      width: 100%;
    }

    .right-box {
      padding-left: 0px;
      padding-top: 32px;
    }
  }

  .categories-grid,
  .camps-grid,
  .duallsection-grid {
    grid-template-columns: 1fr;
  }

  .conter-widget {
    padding-block: 40px;
    padding-inline: 56px;
  }

  .duallsection-grid {
    gap: 24px;

    .side {
      width: 100%;
    }
  }

  .about-us-section .duallsection-grid {
    > :nth-child(1) {
      order: 2;
    }

    > :nth-child(2) {
      order: 1;
    }
  }

  .anniversary-container {
    padding-inline: 10%;

    .years-box {
      right: 40%;
      gap: 8px;

      h3 {
        font-family: Inter;
        font-size: 40px;
      }

      p {
        font-size: 18px;
        line-height: 100%;
      }
    }
  }

  .contacts-list .contacts-list-link span {
    font-size: 15px;
    line-height: 100%;
  }

  .hero-section {
    .hero-section-backdrop .cover-image-container {
      display: none !important;
    }

    .hero-content-container {
      max-width: 500px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;

      .hero-title {
        font-size: 46px;
        font-weight: 400;
        line-height: 100%;

      }

      .hero-description,
      .hero-title {
        text-align: center;
      }

      .hero-action-link {
        margin-top: 32px;
      }
    }

    .hero-section-inner .campers-container {
      display: none !important;
    }

    .hero-section-inner:after {
      display: none !important;
    }
  }


  .capmblok-container {
    padding-inline: 24px;

    .camp-title {
      font-size: 86px;
    }

    .capmblok-grid .gallery-box {
      padding-left: 76px;
    }
  }


}

@media only screen and (max-width: 1100px) {

  :root {
    --global-inline-padding: 24px;
  }


  .siction-title-and-btn-wrapper {
    flex-direction: column;
  }

  .header {
    .logo-wrapper {
      padding-right: 32px;
    }
  }

  .conter-widget--wrapper {
    padding-bottom: 32px;
  }

  .conter-widget {
    padding: 40px;

    .conter-widget-inner {
      gap: 24px;
    }
  }

  .pagehead-title {
    font-size: 36px;
  }

  .pagehead-description {
    margin-top: 24px;
    font-size: 17px;
  }

  .text-content {
    p {
      font-size: 17px;
      line-height: 24px;
    }
  }
}


@media only screen and (max-width: 992px) {


  .capmblok-container .camp-title {
    font-size: 70px;
  }

  .contacts-list {
    .contacts-list-item {
      padding-right: 12px;
      min-width: 200px;
    }

    .contacts-list-link span {
      font-size: 14px;
    }
  }

  .socials {
    padding: 0 12px 0 12px;
    gap: 6px;

    .socials-item {
      padding: 1px 3px;
    }
  }

  .capmblok-container .capmblok-grid {
    display: flex;
    flex-direction: column;
    align-items: center;

    .content-box::before {
      width: 132px;
      height: 126px;
    }

    .content-box {
      padding-top: 32px;
      width: 100%;
    }

    .gallery-box {
      padding: 16px;
    }
  }

  .section-title,
  .section-title-md h2 {
    h2 {
      font-size: 42px;
    }

    h1 {
      font-size: 44px;
    }
  }

  .conter-widget {
    padding: 40px 48px;
    border-radius: calc(var(--border-radius-secondary) * 2);

    .conter-widget-inner {
      max-width: 560px;
      margin: 0 auto;
      grid-template-columns: 1fr 1fr;
    }
  }

  .camps-grid .camp {
    padding: 24px 24px 32px 24px;

    .inner-container {
      gap: 32px;

      .content {
        p {
          font-size: 16px;
          line-height: 100%
        }

        h3 {
          font-size: 18px;
          line-height: 100%
        }
      }
    }
  }

  .joinus-heading-seaction {
    & .duallsection-grid {
      .side.left {
        padding-inline: 60px;
      }
    }
  }

  .joinus-heading-seaction .duallsection-grid::before {
    left: 0px;
    top: 100px;
    width: 38.5px;
    height: 42.5px;
  }

  .copyright {
    font-size: 14px;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --global-inline-padding: 16px;
  }


  .section-title,
  .section-title-md h2 h1 {
    font-size: 34px;
  }

  .hero-section .hero-content-container .hero-title {
    font-size: 36px;
  }

  .categories-grid-item {
    & .inner-container {
      .bottom {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 24px;
      }
    }
  }

  .incamp-fetures-grid {
    padding-top: 24px;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .incamp-section {
    padding-bottom: 32px;
  }
}

@media only screen and (max-width: 650px) {

  .contacts-list .contacts-list-item {
    min-width: 40px !important;
  }

  .capmblok-container .camp-title {
    font-size: 58px;
  }

  header .top .contacts-list,
  header .top .socials {
    display: none;
  }

  header .top .inner-container {
    height: 100%;
  }

  .mobileview-caller-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    a {
      color: var(--clr-light-additional);
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }

    svg {
      width: 20px;
      height: 20px;
      fill: var(--clr-white)
    }
  }

  .incamp-fetures-grid,
  .journy-grid {
    grid-template-columns: 1fr;
  }

  .conter-widget {
    padding: 32px 48px;
    border-radius: 40px;
  }

  .section-content-boxed-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .section-title {
    h2 {
      font-size: 38px;
    }


    h1 {
      font-size: 40px;
    }
  }

  .section-title-md h2 {
    font-size: 38px;
  }

  .camps-grid .camp {
    padding: 20px 16px 24px 16px;

    .inner-container {
      gap: 32px;

      .content {
        p {
          font-size: 16px;
          line-height: 100%
        }

        h3 {
          font-size: 18px;
          line-height: 100%
        }
      }
    }
  }

  .footer .top .content-container .content {

    p,
    a {
      font-size: 15px;
    }
  }

  .footer .footer-nav {
    .outlinks-list .outlinks-list-link span {
      font-size: 16px;
      line-height: 100%
    }

    .menu-item-title {
      font-size: 18px;
      line-height: 100%
    }

    .right-box {
      padding-left: 0px;
      padding-top: 32px;
      flex-direction: column;
      align-items: start;
    }

    .menu-item-box-gallery {
      max-width: 100%;
    }
  }


  .capmblok-container .capmblok-grid {
    .content-box {
      padding-top: 12px;

    }

    .content-box::before {
      width: 66px;
      height: 62px;
    }
  }

  .incamp-fetures-grid .incamp-feture {
    border-radius: 6px;
    gap: 24px;
    padding: 20px 16px;
  }

  .joinus-heading-seaction {
    padding-top: 40px;
    padding-bottom: 32px;
  }
}


@media only screen and (max-width: 560px) {

  .section-title,
  .section-title-md {
    h2 {
      font-size: 36px;
    }
  }

  .section-title-md.left h2 {
    text-align: center;
  }

  .joinus-heading-seaction {

    .duallsection-grid::before {
      left: 0px;
      top: 0px;
      width: 38.5px;
      height: 42.5px;
    }

    .duallsection-grid .side.left {
      padding-inline: 12px;

      .section-title {
        margin-top: 48px;
      }
    }
  }

  .conter-widget {
    padding: 32px 48px;

    .conter-widget-inner {
      grid-template-columns: 1fr;
    }
  }

  .capmblok-container {
    padding-inline: 6px;

    .camp-title {
      font-size: 47px;
    }
  }

}