/* nothing ai generated here - all human written - try not to edit, avoid new human errors :) */

body,
html {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button.fancybox-button:focus,
button.fancybox-button:hover {
  color: #fff;
  background-color: #104ba0;
  text-decoration: none;
}

@font-face {
  font-family: "Satoshi";
  src: url("http://markazasia.local/wp-content/uploads/2025/03/Satoshi-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

.why-chose-box {
  transition: all 800ms ease !important;

  h2 {
    transition: all 800ms ease !important;
  }

  p {
    transition: all 800ms ease !important;
  }

  .elementor-divider-separator {
    transition: all 800ms ease !important;
  }

  svg {
    transition: all 800ms ease !important;
  }

  &:hover {
    transform: scale(0.95);
    /* background: #008bd5; */
    background: linear-gradient(150.83deg, #14164c 16.25%, #175580 101.82%);

    .elementor-divider-separator {
      border-block-start: var(--divider-border-width)
        var(--divider-border-style) #fff !important;
    }

    h2 {
      color: #fff !important;
    }

    p {
      color: #fff !important;
    }

    svg {
      filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
        hue-rotate(288deg) brightness(102%) contrast(102%);
    }
  }
}

.load-more-btn {
  font-family: Satoshi;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #ffffff;
  padding: 10px 36px;
  background: linear-gradient(90deg, #232a6b 0%, #008bd5 61%, #00b8eb 100%);
  border-radius: 35px;
  transition: all 600ms ease !important;

  &:hover {
    background: linear-gradient(90deg, #232a6b 40%, #008bd5 100%, #00b8eb 100%);
    color: #fff;
  }
}

#load-more-blog {
  display: inline-block;
}

/* packages slider & Grid */
.tour-packages-slider {
  overflow: visible !important;

  &::after {
    content: "";
    position: absolute;
    width: 1000px;
    height: calc(100% + 40px);
    background: #fff;
    top: -20px;
    left: -1020px;
    z-index: 1;
  }

  .swiper-slide {
    transition: all 600ms ease;
  }

  .swiper-slide-prev {
    opacity: 0;
    visibility: hidden;
  }

  .packages-slider-next,
  .packages-slider-prev {
    width: 40px;
    height: 40px;
    border: 1px solid #d4d4d4;
    border-radius: 64px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.06);
    position: absolute;
    top: 50%;
    z-index: 1;
    background: var(--White, #fff);
    transform: translateY(-50%);
    left: -20px;
    cursor: pointer;

    &:hover {
      background: #000;
      border-color: #000;
      svg {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
          hue-rotate(172deg) brightness(101%) contrast(105%);
      }
    }
  }

  .packages-slider-prev {
    left: unset;
    right: -20px;
  }

  .package-item {
    padding: 20px;
    padding: 21px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--White, #fff);
    box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.06);
    gap: 20px;
    cursor: pointer;

    .thumbnail {
      position: relative;
      border-radius: 12px;
      background: var(--Secondary, #3271af);
      overflow: hidden;
      width: 100%;

      img {
        width: 100%;
        height: 100%;
        aspect-ratio: 316/211;
        object-fit: cover;
        transition: all 600ms ease;
      }

      .destinations-count {
        position: absolute;
        bottom: 10px;
        left: 10px;

        color: var(--white, #fff);
        font-family: Satoshi;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;

        display: inline-flex;
        padding: 8px 12px;
        justify-content: center;
        align-items: center;
        gap: 8px;

        border-radius: 32px;
        background: rgba(150, 150, 150, 0.5);
        backdrop-filter: blur(2px);

        z-index: 1;
      }

      &::after {
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: rgb(255 255 255 / 0.3);
        transform: translate(-50%, -50%) rotate(-45deg);
        content: "";
        z-index: 0;
      }

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: auto;
        aspect-ratio: 316/187;
        background: linear-gradient(
          0deg,
          #000 -18.45%,
          rgba(0, 0, 0, 0) 96.79%
        );
        bottom: 0;
        left: 0;
        z-index: 1;
      }
    }

    .package-info {
      width: 100%;

      .package-name {
        color: #181717;
        font-family: Satoshi;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .duration {
        color: #ababab;
        font-family: Satoshi;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
      }
    }

    div.price {
      border-top: 1px solid #e1e1e1;
      padding-top: 20px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span.price {
        display: flex;
        width: 60%;
        align-items: center;
        gap: 10px;
        color: #181717;
        font-family: Manrope;
        font-family: Satoshi;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        span {
          color: #ababab;
          font-family: Manrope;
          font-family: Satoshi;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }
      }

      .review {
        color: #181717;
        font-family: Satoshi;
        font-size: 11.311px;
        font-style: normal;
        font-weight: 500;
        line-height: 16.966px;

        display: flex;
        gap: 2.26px;
        flex-direction: column;

        .rating {
          gap: 2.26px;
          display: flex;
          flex-wrap: nowrap;
        }
      }
    }

    &:hover {
      .thumbnail {
        img {
          transform: scale(1.1);
        }

        &::after {
          height: 250%;
          transition: all 600ms linear;
          background-color: #fff0;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .tour-packages-slider {
    .package-item {
      padding: 16px !important;
      .thumbnail {
        aspect-ratio: 220/149;
        .destinations-count {
          font-size: 12px !important;
        }
      }
      .package-name {
        font-size: 18px !important;
      }

      .duration {
        font-size: 14px !important;
      }

      div.price {
        span.price {
          font-size: 16px !important;
        }

        span {
          font-size: 12px !important;
        }

        .review {
          font-size: 10px !important;
        }
      }
    }

    .packages-slider-next,
    .packages-slider-prev {
      width: 32px;
      height: 32px;
      left: -14px;
    }

    .packages-slider-prev {
      left: unset;
      right: -14px;
    }
  }
}

/* Destinations Slider & Grid */
.destination-slider {
  overflow: visible !important;

  .destination-item {
    border-radius: 12px;
    overflow: hidden;
    background: var(--Gray, #c1c1c1);
    position: relative;
    aspect-ratio: 325/480;
    cursor: pointer;

    img {
      aspect-ratio: 325/480;
      width: 100%;
      height: 100%;
      transition: all 600ms ease;
      object-fit: cover;
    }

    .destination-info {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      width: 100%;
      z-index: 1;

      h3.destination-name {
        color: var(--White, #fff);
        font-family: Satoshi;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 0;
        margin: 0;
      }

      a.view-more {
        color: var(--White, #fff);
        font-family: Satoshi;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-decoration: none;

        display: flex;
        padding: 4px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;

        border-radius: 35px;
        background: var(
          --Gradinet,
          linear-gradient(90deg, #232a6b 0%, #008bd5 61%, #00b8eb 100%)
        );
        transition: background 1s ease !important;

        &:hover {
          background: var(
            --Gradinet,
            linear-gradient(90deg, #232a6b 40%, #008bd5 100%, #00b8eb 100%)
          );
        }
      }
    }

    &::before {
      content: "";
      aspect-ratio: 325.333/198.674;
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 0;
      left: 0;
      background: linear-gradient(0deg, #000 -18.45%, rgba(0, 0, 0, 0) 96.79%);
      z-index: 1;
    }

    &::after {
      position: absolute;
      width: 200%;
      height: 0%;
      left: 50%;
      top: 50%;
      background-color: rgb(255 255 255 / 0.3);
      transform: translate(-50%, -50%) rotate(-45deg);
      content: "";
      z-index: 0;
    }

    &:hover {
      img {
        transform: scale(1.1);
      }

      &::after {
        height: 250%;
        transition: all 600ms linear;
        background-color: #fff0;
      }
    }
  }

  .destination-slider-next,
  .destination-slider-prev {
    width: 40px;
    height: 40px;
    border: 1px solid #d4d4d4;
    border-radius: 64px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.06);
    position: absolute;
    top: 50%;
    z-index: 1;
    background: var(--White, #fff);
    transform: translateY(-50%);
    left: -20px;
    cursor: pointer;

    &:hover {
      background: #000;
      border-color: #000;
      svg {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
          hue-rotate(172deg) brightness(101%) contrast(105%);
      }
    }
  }

  .destination-slider-prev {
    left: unset;
    right: -20px;
  }

  &::after {
    content: "";
    position: absolute;
    width: 1000px;
    height: calc(100% + 40px);
    background: #f9fcfd;
    top: -20px;
    left: -1020px;
    z-index: 1;
  }

  &::before {
    content: "";
    position: absolute;
    width: 1000px;
    height: calc(100% + 40px);
    background: #f9fcfd;
    top: -20px;
    right: -1020px;
    z-index: 2;
  }
}

.destination-archive-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .destination-item {
    width: calc(25% - 60px / 4);
  }

  &::after,
  &::before {
    display: none;
  }
}

.destination-packages {
  .destination-item {
    aspect-ratio: 325/359;
  }
}

@media screen and (max-width: 1024px) {
  .destination-slider {
    flex-direction: column;
    gap: 16px;

    .destination-item {
      aspect-ratio: 252/350;
      .destination-info {
        padding: 15px !important;
        h3.destination-name {
          font-size: 18px !important;
        }

        a.view-more {
          font-size: 14px !important;
          padding: 6px 18px !important;
        }
      }
    }

    .destination-slider-next,
    .destination-slider-prev {
      width: 32px;
      height: 32px;
      left: -14px;
    }

    .destination-slider-prev {
      left: unset;
      right: -14px;
    }
  }

  .destination-archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex-direction: row;

    .destination-item {
      width: calc(33.33% - 32px / 3);
    }
  }
}

@media screen and (max-width: 768px) {
  .destination-archive-grid {
    .destination-item {
      /* width: calc(50% - 16px / 2); */
      width: 100%;

      .destination-info {
        flex-wrap: wrap;
        gap: 10px;
        /* padding: 10px 15px !important; */

        .view-more {
          /* display: none !important; */
        }
      }
    }
  }
}

/* Testimonial Slider & Grid */
.testimonial-slider {
  background: var(--Blue, #104ba0);

  .testimonial-item {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* max-width: 741px; */
    background-color: #104ba0;

    p.review {
      color: #fff;
      font-family: Satoshi;
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      line-height: 50px;
      letter-spacing: -1px;
      margin: 0;
      padding: 0;
    }

    .customer-info {
      display: flex;
      gap: 24px;
      align-items: center;

      img {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        border-radius: 100%;
      }

      div {
        display: flex;
        flex-direction: column;
        gap: 4px;

        span {
          display: block;

          &.name {
            color: #fff;
            font-family: Inter;
            font-family: Satoshi;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: 26px;
          }

          &.title {
            color: #cacaca;
            font-family: Inter;
            font-family: Satoshi;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px;
          }
        }
      }
    }
  }

  .testimonial-slider-prev {
    border-radius: 100px;
    background: #1453af;
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 8px;
    position: absolute;
    bottom: 0;
    right: 72px;
    cursor: pointer;
    z-index: 1;
  }

  .testimonial-slider-next {
    border-radius: 100px;
    background: var(--Primary, #008bd5);
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
    z-index: 1;
  }
}

@media screen and (max-width: 1024px) {
  .testimonial-slider {
    .testimonial-item {
      p.review {
        color: #fff;
        font-family: Satoshi;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
        letter-spacing: -1px;
      }

      .customer-info {
        gap: 12px;

        div {
          display: flex;
          flex-direction: column;
          gap: 4px;

          span {
            &.name {
              color: #fff;
              font-family: Inter;
              font-size: 18px;
              font-style: normal;
              font-weight: 600;
              line-height: 26px;
            }

            &.title {
              color: #cacaca;
              font-family: Inter;
              font-size: 12px;
              font-style: normal;
              font-weight: 400;
              line-height: 26px;
            }
          }
        }
      }
    }

    .testimonial-slider-prev {
      padding: 11px;
      padding-right: 14px;
      padding-left: 8px;
      right: 62px;
    }

    .testimonial-slider-next {
      padding: 11px;
      padding-left: 14px;
      padding-right: 8px;
    }
  }
}

/* Blog Slider & Grid */
.blogs-slider {
  margin-bottom: 28px;

  .blog-slide {
    /* max-width: calc(33.33% - 40px / 3); */
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
    position: relative;
    cursor: pointer;

    img {
      aspect-ratio: 440/480;
      border-radius: 12px;
      background: #d9d9d9;
      object-fit: cover;
      margin-bottom: 8px;
      width: 100%;
    }

    ul.blog-info {
      margin: 0;
      padding: 0;
      list-style: none;

      display: flex;
      align-items: center;
      gap: 25px;

      li {
        color: #ababab;
        leading-trim: both;
        text-edge: cap;
        font-family: Satoshi;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
      }

      li:nth-of-type(even) {
        width: 8px;
        height: 8px;
        background: #ababab;
        border-radius: 100%;
      }
    }

    h3.blog-title {
      margin: 0;
      overflow: hidden;
      color: var(--Neutral-04, #191919);
      leading-trim: both;
      text-edge: cap;
      /* text-overflow: ellipsis; */
      /* white-space: nowrap; */
      font-family: Satoshi;
      font-size: 26px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &::after {
      position: absolute;
      width: 200%;
      height: 0%;
      left: 50%;
      top: 50%;
      background-color: rgb(255 255 255 / 0.3);
      transform: translate(-50%, -50%) rotate(-45deg);
      content: "";
      z-index: 0;
    }

    &:hover {
      &::after {
        height: 250%;
        transition: all 600ms linear;
        background-color: #fff0;
      }
    }
  }

  .blogs-slider-pagination {
    position: absolute;
    bottom: -28px !important;
    left: 50% !important;
    z-index: 3 !important;
    transform: translateX(-50%) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    .swiper-pagination-bullet {
      width: 8px !important;
      height: 8px !important;
      background: #d9d9d9 !important;
      border-radius: 50% !important;
      margin: 0 !important;
      z-index: 3 !important;
      opacity: 1 !important;
    }

    .swiper-pagination-bullet-active {
      width: 24px !important;
      height: 8px !important;
      border-radius: 8px !important;
      background: #104ba0 !important;
    }
  }
}

.blogs-archive-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 20px;

  .blog-slide {
    width: calc(33.33% - 40px / 3);
  }

  &::after,
  &::before {
    display: none;
  }
}

@media screen and (min-width: 1025px) {
  .blogs-slider-pagination {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {
  .blogs-slider {
    overflow: visible !important;

    .blog-slide {
      gap: 20px !important;
      img {
        aspect-ratio: 252/274.909 !important;
        margin-bottom: 12px !important;
      }

      ul.blog-info {
        gap: 15px !important;

        li {
          font-size: 14px !important;
          line-height: 14px !important;
        }
      }

      h3.blog-title {
        font-size: 18px !important;
        margin-top: -6px !important;
      }
    }
  }

  .blogs-archive-grid {
    /* gap: 20px 20px; */

    .blog-slide {
      width: calc(50% - 10px);
    }
  }
}

@media screen and (max-width: 768px) {
  .blogs-archive-grid {
    .blog-slide {
      width: 100%;
    }
  }
}

/* Exclusive Packages Grid */

.exclusive-packages-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .exclusive-package {
    width: calc(25% - 60px / 4);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 0px 36px 0px #0000000f;
    cursor: pointer;

    .thumb {
      aspect-ratio: 325/186;
      overflow: hidden;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 500ms ease;
      }

      &::after {
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: rgb(255 255 255 / 0.3);
        transform: translate(-50%, -50%) rotate(-45deg);
        content: "";
        transition: all 500ms ease;
      }
    }

    .package-info {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 28px;

      h4.package-title {
        margin: 0;

        font-family: Satoshi;
        font-weight: 700;
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #101010;
      }

      .rating-pricing {
        display: flex;
        justify-content: space-between;

        .rating {
          display: flex;
          flex-direction: column;
          gap: 2.26px;
          svg {
          }

          .review-count {
            font-family: Satoshi;
            font-weight: 500;
            font-size: 11.31px;
            line-height: 16.97px;
            letter-spacing: 0px;
            color: #79797a;
          }
        }

        .pricing {
          font-family: Satoshi;
          font-weight: 400;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: 0%;
          color: #79797a;

          span {
            display: block;
            text-align: right;

            font-family: Satoshi;
            font-weight: 700;
            font-size: 21px;
            line-height: 100%;
            letter-spacing: 0%;
            color: #008bd5;
            margin-top: 3px;
          }
        }
      }
    }

    &:hover {
      .thumb {
        img {
          transform: scale(1.1);
        }

        &::after {
          height: 250%;
          transition: all 600ms linear;
          background-color: #fff0;
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .exclusive-packages-grid {
    .exclusive-package {
      width: calc(33.33% - 40px / 3);

      .package-info {
        gap: 20px;

        h4.package-title {
          font-family: Satoshi;
          font-weight: 700;
          font-size: 18px;
          line-height: 100%;
          letter-spacing: 0%;
          color: #101010;
        }

        .rating-pricing {
          display: flex;
          justify-content: space-between;

          .rating {
            svg {
              display: block;
            }

            .review-count {
              font-family: Satoshi;
              font-weight: 500;
              font-size: 10px;
              line-height: 16px;
            }
          }

          .pricing {
            font-family: Satoshi;
            font-weight: 400;
            font-size: 14px;
            line-height: 100%;
            letter-spacing: 0%;

            span {
              display: block;
              text-align: right;
              font-family: Satoshi;
              font-weight: 700;
              font-size: 18px;
              line-height: 100%;
              letter-spacing: 0%;
              color: #008bd5;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .exclusive-packages-grid {
    .exclusive-package {
      width: 100%;
    }
  }
}

.package-gallery-slider {
  position: relative;
  .swiper-slide {
    aspect-ratio: 1360/323;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .package-gallery-slider-next,
  .package-gallery-slider-prev {
    position: absolute;
    top: 50%;
    z-index: 9;
    background-color: #fff;
    cursor: pointer;
    border-radius: 100%;
    display: grid;
    align-content: center;
    padding: 5px;
    transition: all 600ms ease;

    &:hover {
      background: #000;
      border-color: #000;
      svg {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
          hue-rotate(172deg) brightness(101%) contrast(105%);
      }
    }
  }

  .package-gallery-slider-prev {
    right: 10px;
    transform: translateY(-50%);
  }

  .package-gallery-slider-next {
    left: 10px;
    transform: translateY(-50%);
  }
}

@media (max-width: 1024px) {
  .package-gallery-slider {
    .swiper-slide {
      min-height: 240px;
    }
  }
}

@media (max-width: 767px) {
  .package-gallery-slider {
    .swiper-slide {
      min-height: 200px;
    }
  }
}