@layer layouts {
  .zig-zag-line {
    --a: 130deg;
    --s: 20px;
    --b: 2px;

    width: 50%;
    height: calc(var(--b) + var(--s) / (2 * tan(var(--a) / 2)));
    margin: 1rem auto;
    background: #fff;

    --_g: var(--s) repeat-x conic-gradient(from calc(var(--a) / -2) at bottom,
        #0000,
        #000 1deg calc(var(--a) - 1deg),
        #0000 var(--a));
    mask: 50% calc(-1 * var(--b)) / var(--_g) exclude, 50% / var(--_g);
    -webkit-mask: 50% calc(-1 * var(--b)) / var(--_g) exclude, 50% / var(--_g);

    animation: zigzag-move 1s linear infinite;
  }

  @keyframes zigzag-move {
    from {
      -webkit-mask-position-x: 0;
    }

    to {
      -webkit-mask-position-x: var(--s);
    }
  }
.badge{
    background: #cd060c;
    color: white;
    border-radius: 10px;
}
  /* =====================
    SECTION: HERO
    ====================== */
  .hero {
    position: relative;
  }

  .hero .carousel-item {
    min-height: 75svh;
    display: grid;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      /*--background-ol: linear-gradient(to bottom,*/
      /*    #031313,*/
      /*    rgb(40 11 114 / 50%));*/
      --background-ol: linear-gradient(to bottom, #03131312, rgb(40 11 114 / 34%));
      background: var(--background-ol);
    }

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

    & .carousel-caption {
      bottom: 50%;
      transform: translateY(50%);

      & .text-banner {
        line-height: 1.15;

        & span {
          color: var(--secondary-color);
        }
      }
    }
  }

  .hero .carousel-inner .blurry-light {
    position: absolute;
    width: 240px;
    aspect-ratio: 1;
    z-index: 1;
    border-radius: 50%;
    filter: blur(150px);

    &.topStart {
      background: var(--primary-color);
      top: 0;
      left: 0;
      mix-blend-mode: luminosity;
    }

    &.bottomEnd {
      background: var(--secondary-color);
      bottom: 15%;
      right: -10%;
      width: 480px;
      opacity: 0.65;
      mix-blend-mode: hard-light;
    }
  }

  .hero .scroll-down {
    position: absolute;
    color: var(--bs-light);
    bottom: 1rem;
    left: 50%;
    z-index: 1;
    font-size: 2rem;
    animation: scrollDown 2s infinite;
  }

  @keyframes scrollDown {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  /* =====================
    SECTION: ABOUT
    ====================== */
  .about {
    position: relative;
    z-index: 1;
    overflow: hidden;
    /*background: url("../images/welcome-bg.webp") no-repeat center center/cover;*/

    &::after,
    &::before {
      content: "";
      position: absolute;
      inset: 0;
    }

    &::before {
      opacity: 0.5;
      background: radial-gradient(circle at 0% 0%,
          rgba(236 243 203 / 0.8),
          transparent 50%),
        radial-gradient(circle at 80% 135%,
          rgba(238 190 229 / 0.8),
          transparent 50%),
        radial-gradient(circle at center, #e8f0f5, #f0f3f7);
      background: radial-gradient(circle at 0% 0%,
          rgba(239 241 227 / 0.6),
          transparent 50%),
        radial-gradient(circle at 80% 135%,
          rgba(238 190 229 / 0.8),
          transparent 50%);
      z-index: -1;
    }

    &::after {
      opacity: 0.1;
      z-index: -2;
      background: url("../images/welcome-pattern.webp");
    }

    & .about__image {
      position: absolute;
      opacity: 0.01;
      z-index: -1;
      top: 0%;
      right: 5%;
      animation: rotateLogo 10s linear infinite;
    }
  }

  @keyframes rotateLogo {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .stats-section {
    background: linear-gradient(135deg, #ebdbdb, #f1e5e3);
    border-radius: 12px;
    color: var(--accent-color);
    box-shadow: 0 8px 20px rgb(226 35 104 / 20%);
  }

  .stats-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1.5rem;
    border-radius: 12px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .stats-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px rgba(18 114 143 / 0.3);
  }

  .stats-icon {
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    --sicon-bg: color-mix(in srgb,
        rgb(var(--primary-color-rgb)) 100%,
        black 25%);
    ;
    --sicon-clr: color-mix(in srgb,
        rgb(var(--primary-color-rgb)) 25%,
        white 75%);
    ;
  }

  .stats-icon i::before {
    padding: 2rem;
    border-radius: 50%;
    background-color: var(--sicon-bg);
    color: var(--sicon-clr);
  }

  .stats-info {
    text-align: left;
  }

  .stats-info .text-heading {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent-color);
  }

  .stats-info p {
    margin: 0;
    font-size: 1rem;
    color: rgba(var(--accent-color-rgb), 0.75);
    font-weight: 500;
  }

  /* =====================
    SECTION: SERVICES
    ====================== */

  .services__tabs {
    display: flex;
    min-height: 800px;
  }

  .services__tabs .services__tab {
    flex: 1;
    width: 100%;
    transition: flex 500ms ease-in-out;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: end;
    padding: 2rem;
    position: relative;
    z-index: 1;
    cursor: pointer;
  }

  .services__tabs .services__tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 15, 0.75);
    z-index: -1;
  }

  .services__tabs .services__tab.active {
    flex: 6;
    cursor: initial;
  }

  .services__tabs .services__tab.active::before {
    background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #111111 100%);
  }

  .services__tabs .services__tab .service__content {
    transition: none;
  }

  .services__tabs .services__tab .services__heading {
    font-size: var(--fs-title);
    font-family: var(--heading-font);
    font-variation-settings: "wght" 500;
    color: var(--bs-white);
    line-height: 1;
    margin-bottom: 1rem;
  }

  .services__tabs .services__tab .services__heading.display {
    text-orientation: mixed;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--fs-small-banner);
  }

  .services__tabs .services__tab .services__text,
  .services__tabs .services__tab .btn {
    color: var(--bs-white);
  }

  /* =====================
      SECTION: CLIENTS
      ====================== */
  .clients-home img {
    filter: grayscale(100%);
    transition: 250ms ease-in-out;
  }

  .clients-home img:hover {
    filter: grayscale(0%);
  }

  /* =====================
    SECTION: DESTINATION
    ====================== */
  .destination__home {
    position: relative;
    z-index: 1;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: url("../images/destination-bg2.webp") top center/cover;
      mask-image: radial-gradient(ellipse at 50% 100%,
          rgb(0 0 0 / 50%) 0%,
          transparent 80%);
      opacity: 0.5;
      z-index: -1;
    }
  }

  /* =====================
      SECTION: ARCHIVES
      ====================== */
  .portfolio img {
    filter: grayscale(100%);
    transition: 250ms ease-in-out;
  }

  .portfolio img:hover {
    filter: grayscale(0%);
  }

  /* =====================
    SECTION: CONTACT__HOME
    ====================== */
  .contact__home {
    position: relative;
    z-index: 1;
    background: #fcf9f6;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: url("../images/mandala-pattern.webp");
      /* background-size: 128px; */
      opacity: 0.2;
      z-index: -1;
      mix-blend-mode: luminosity;
    }
  }

  .contact__wrapper {
    background: #fdf7f1;
    border-radius: 1rem;
  }

  .contact__cta {
    background: radial-gradient(circle at center, #a9191c, #7a1839);
    color: var(--bs-light);
    border: none;
    overflow: hidden;

    & .card-body {
      background: repeating-radial-gradient(circle at center,
          #7d2627 10px,
          transparent 20px);
    }
  }

  .contact__form {
    padding: 1rem;
    background: var(--accent-color);
    border-radius: 0.75rem;
  }

  .contact__form .form-control {
    background: #272525;
    border-color: #6b6565;
    color: #e1d0cc;
  }

  .contact__form .form-control+label {
    color: #e1d0cc;

    &::after {
      background: none;
    }
  }

  /* ================================================================================================================== */

  .page-title {
    font-variation-settings: "wght" 600;
    font-family: var(--heading-font);
    font-size: var(--fs-sub-title);
    padding-inline-start: 1rem;
    border-inline-start: 0.5rem solid var(--primary-color);
  }

  /* Target right-aligned text */
  .page-title.text-end,
  .text-end>.page-title {
    padding-inline-start: 0;
    padding-inline-end: 1rem;
    border-inline-start: 0;
    border-inline-end: 0.5rem solid var(--primary-color);
  }

  .page-title.text-center,
  .text-center>.page-title {
    padding-inline: 0;
    border-inline: 0;
  }

  .card-theme .card {
    color: #423306;
    text-align: center;
    border: 0;
    box-shadow: 0 0 1rem rgba(var(--accent-color-rgb), 0.25);
    overflow: hidden;
  }

  .card-theme .card-img {
    scale: 1.25;
    transition: translate 250ms ease-in-out;
  }

  .card-theme .card-img-overlay {
    background: linear-gradient(to top,
        rgba(var(--secondary-color-rgb), 0.95) 15%,
        rgba(var(--secondary-color-rgb), 0) 75%);
    place-content: end;
    padding-block-end: 5%;
  }

  .card-theme .card:hover .card-img {
    translate: 10%;
  }

  .card-theme .card .bi-arrow-right::before {
    color: #423306;
    opacity: 0;
    translate: -1rem 0;
    transition: 250ms ease-in-out;
  }

  .card-theme .card:hover .bi-arrow-right::before {
    opacity: 1;
    translate: none;
  }

  .card-4_5 .card-img {
    aspect-ratio: 4/5;
    object-fit: cover;
  }

  .card-1_2 .card-img {
    aspect-ratio: 1/2;
    object-fit: cover;
  }

  /* =====================
    SECTION: ABOUT
    ====================== */
  .about_arrow {
    position: relative;
    z-index: 1;
    background: var(--primary-color);

    &::after {
      content: "";
      position: absolute;
      height: 100%;
      aspect-ratio: 1;
      background: radial-gradient(circle at 75% 75%,
          var(--secondary-color) 0% 0%,
          var(--accent-color) 80%);
      border-radius: 50%;
      top: -35%;
      left: 5%;
      z-index: -1;
      animation: breath 2s linear infinite alternate;
    }

    & .argx {
      position: absolute;
      top: -60%;
      left: 70%;
    }
  }

  /* =====================
    SECTION: CONTACT PAGE 
    ====================== */

  .contact__info {
    border-radius: 5px;
    background-color: var(--bs-light);
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  }

  .contact__info a {
    word-break: break-all;
  }

  .contact__icon i::before {
    background-color: var(--primary-color);
    color: var(--bs-light);
    font-size: var(--fs-small-banner);
    box-shadow: 0px 6px 20px rgba(var(--primary-color-rgb), 0.6);
    border-radius: 5px;
    padding: 1rem;
  }

  .contact__page {
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  }

  .contact__page iframe {
    border-radius: 5px;
  }

  /* =====================
    SECTION: CLIENTS PAGE
    ====================== */
  .clients {
    text-align: center;
    padding: 0.5rem;
  }

  .clients img {
    filter: grayscale(100%);
    transition: 250ms ease-in-out;
  }

  .clients img:hover {
    filter: grayscale(0%);
  }

  /* =====================
    SECTION: DESTINATION PAGE
    ====================== */

  .destination__info {
    text-align: center;
    position: relative;
    z-index: 1;
    border-radius: 0.7rem;
    overflow: hidden;
    display: block;
  }

  .destination__info::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(184deg,
        rgba(255, 255, 255, 0) 33%,
        rgba(var(--secondary-color-rgb), 1) 83%);
    z-index: 1;
  }

  .destination__text {
    position: absolute;
    bottom: 20px;
    width: 100%;
    color: var(--bs-dark);
    z-index: 1;
  }

  .destination__info img {
    transition: all 0.3s linear;
  }

  .destination__info:hover .destination__thumb img {
    transform: scale(1.1);
    transition: all 0.3s linear;
  }

  /* .destination__anchor {
    opacity: 0;
    transform: translateY(2rem);
    transition: all 0.3s linear;
    transition-behavior: allow-discrete;
  }

  .destination__info:hover .destination__anchor {
    transform: none;
    opacity: 1;
    @starting-style {
      opacity: 0;
      transform: translateY(2rem);
    }
  }*/

  /* =====================
    SECTION: SERVICE__PAGES
    ====================== */

  .event__management__info {
    text-align: center;
  }

  .event__management__info img {
    margin-bottom: 1rem;
    animation: breath 3s ease-in-out 0s infinite alternate forwards;
  }

  @keyframes breath {
    0% {
      transform: translateY(15px);
    }

    100% {
      transform: translateY(-15px);
    }
  }

  .service .glide__arrow--left {
    left: 0;
  }

  .service .glide__arrow--right {
    right: 0;
  }

  .service .glide__slide {
    height: auto;
  }

  .service .accordion-item {
    background: none;
  }

  .service .accordion-button {
    background: none;
    font-variation-settings: "wdth" 100, "wght" 500;
    /* letter-spacing: 0.9pt; */
  }

  /* =====================
    SECTION: BLOGS
    ====================== */

  .sub-heading {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-dark);
    margin-top: 20px;
    margin-bottom: 5px;
  }

  li.li-bottom {
    margin: 0.6rem 0px !important;
  }

  .blogs h2 {
    font-variation-settings: "wght" 600;
    font-family: var(--heading-font);
    font-size: var(--fs-sub-title);
    margin-top: 1.7rem;
    margin-bottom: 5px;
  }

  .blogs h3 {
    font-size: var(--fs-caption);
    font-variation-settings: "wdth" 115, "wght" 500;
    margin-top: 1.7rem;
    margin-bottom: 5px;
  }

  .blogs ul {
    padding-left: 2rem;
    list-style-type: disc;
  }

  .blogs ul li {
    margin: 0.6rem 0px !important;
  }

  .blogs ol {
    padding-left: 2rem;
    list-style-type: decimal;
  }

  .blogs ol li {
    margin: 0.6rem 0px !important;
  }

  .blogs .li-marker-size li::marker {
    font-family: var(--heading-font);
    font-size: var(--fs-sub-title) !important;
  }

  #gallery {
    gap: 10px;
    justify-content: center;
    margin-bottom: 1rem;
    border: 0;
  }

  .gallery-thumbnail {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    grid-gap: 20px;
  }

  .gallery-thumbnail :is(img, video) {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    object-position: center 35%;
    transition: all 0.5s ease;
    border-radius: 0.5rem;
  }
}