.news-ticker .announcement-container {
    display: block;
    transition: transform 0.7s ease, opacity 0.5s ease, top 0.5s ease;
}
.hideTikker .announcement-container {
    display: none;
}
.announcement-container {
    display: none;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 200;
}
.news-ticker-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
    justify-content: space-between;
}
.news-ticker-container {
    background: #FFF;
    border-bottom: 1px solid var(--Global-Colours-AI-Grey-G100, #EDEEF1);
    opacity: 1;
    position: relative;
    z-index: 999;
    height: 36px;
}
.news-ticker-inner-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.news-ticker-card {
    color: var(--Global-Colours-Base-Black, #000);
    font-size: 12px;
    width: 100%;
    position: relative;
}
.icon-text-container {
    color: #000;
    font-family: var(--variable-font-family);
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
}
.icon-text-container img {
    height: 20px;
    width: 20px;
}
.news-ticker-data-index {
    color: #ffffff;
    margin: auto 0;
}
.news-ticker-data {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 36px;
    overflow: hidden;
}
.news-data {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 36px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0);
    transition: none;

    /* ✅ FIXED ellipsis */
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    line-height: 36px;
    z-index: 0;
}
.news-data.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
    transform: translateY(0);
    animation: none;
}
.news-data.leaving {
    opacity: 1;
    pointer-events: none;
    z-index: 2;
    animation: tickerLeaveUp 1.5s forwards;
}
.news-data.appearing {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: tickerAppearUp 1.5s forwards;
}
.alert-info-icon .img {
    width: 20px;
    height: 20px;
}
.cancel img {
    width: 20px;
    height: 20px;
}
.cancel {
    margin: auto 0;
}
.cancel:hover {
    cursor: pointer;
}
.news-ticker-link {
    color: var(--Global-Colours-AI-Blue-B600, #2160C7);

    font-family: var(--body-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 16.8px */
    letter-spacing: 0.048px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;

    display: flex;
    justify-content: center;
    min-width: 75px; /* stays usable at small screens */
}
.news-ticker-link img {
    width: 20px;
    height: 19px;
    margin-left: 0px;
}
.news-ticker-link:hover {
    color: #000;
    text-decoration: none;
}

.message-type {
    margin-left: 8px;
}

.news-ticker-container {
    height: 40px;
}
.news-ticker-card {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-all-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* 👈 prevent shrinking */
}

@media screen and (max-width: 767px) {
    .icon-text-container img {
        height: 16px;
        width: 16px;
    }
    .icon-text-container {
        padding-left: 8px;
    }
    .news-ticker-card {
        font-size: 12px;
    }
    .news-ticker-data-index {
        font-size: 12px;
        color: #FFF;
    }
    .cancel img {
        width: 20px;
        height: 20px;
    }
}

.news-ticker header section {
    top: 36px;
}
.news-ticker header section.hide {
    top: 0px;
}
.news-ticker #header {
    height: 114px;
}

.news-ticker .announcement-container.hide {
    transform: translateY(-100%);
    opacity: 0.9;
}

@media(min-width:1025px) {
    .ai-fp-view-0.news-ticker .floating-chat-bot-outer-wrapper {
        bottom: 40px;
    }
}

/* Animation keyframes for news ticker transitions */
@keyframes tickerLeaveUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes tickerAppearUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.offer-banner-wrapper {
   margin-top:1pc;
    .banner-wrapper {
        display: flex;
        gap: 4px;
        justify-content: start;
        align-items: center;
        width: 100%;
        height: 100%;
            .offer-banner-logo {
                height: 100%;
            }
    }
}

.offer-banner-wrapper .offer-banner-outer {
    display: flex;
    height: 32px;
    padding: var(--Units-3XS, 2px) var(--Spacing-System-S, 12px) var(--Units-3XS, 2px) var(--Units-3XS, 2px);
    align-items: center;
    gap: var(--Spacing-System-2XS, 4px);
    overflow:hidden;
    border-radius: 900px;
    border: 1px solid var(--Global-Colours-AI-Grey-G200, #D3D6DB);
    background: var(--Global-Colours-AI-Cream, #F9F6EE);
}

.offer-banner-content {
    color: var(--Text-Text_Heading, #383C42);
    font-family: var(--body-font-family, "Nunito Sans");
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 16.8px */
    letter-spacing: 0.048px;
    width: 100%;
    margin: 0px;
}
img.offer-banner-info-icon{
    width: 14px;
    height: 14px;
}
.dark-theme .offer-banner-mobile{
    filter:grayscale(1);
}
/* Clickable banner styles */
.offer-banner-wrapper a.clickable-banner {
    display: flex;
    gap:4px;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease-in-out;
    
    .offer-banner-logo {
        height: 100%;
    }
}
.high-priority-notification-wrapper{
    border-radius: var(--Border_Radius-XS, 8px);
    background: linear-gradient(90deg, #5B092B 0%, #BF004B 127.15%);
    padding:12px;
    margin-top: 1pc;
    display:flex;
    gap: 4px;
    .info-message{
        color: var(--Global-Colours-Base-White, #FFF);

        /* Overline/Overline-Brand */
        font-family: var(--variable-font-family);
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%; /* 12.5px */
        letter-spacing: 0.1px;
        display:flex;
        align-items: center;
        a{
            color: var(--Global-Colours-Base-White, #FFF);
            text-decoration: none;
            font-weight: 700;
            &:hover{
                text-decoration: underline;
            }
        }
    }
    .info-icon{
        display: flex;
    }
    p{
        margin-bottom:0;
    }
    .hp-nunito-sans{
        font-family: 'Nunito Sans', sans-serif;
        font-size: 12px;
        color: var(--Global-Colours-Base-White, #FFF);
        font-weight: 600;
        letter-spacing: 0.048px;
    }
}
.high-priority-notification + .high-priority-notification .high-priority-notification-wrapper {
  margin-top: 8px; /* or whatever smaller value you need */
}

.ai-video {
    .video-wrapper {
        border-radius: var(--Units-2XL, 12px);
        background: linear-gradient(270deg, rgba(22, 22, 22, 0.70) 6.35%, rgba(0, 0, 0, 0.00) 40.62%), linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(70, 70, 70, 0.46) 100%), url(../components/home/components/ai-video/clientlibs/css/<path-to-image>) lightgray -17.469px -1432.156px / 111.21% 455.059% no-repeat;
        aspect-ratio: 16 / 9;
        max-height:400px;
        overflow: hidden;
        width:100%;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background:black;
        border-radius: var(--Units-2XL, 12px);
    }
}

.special-deals-wrapper {
.special-offer-wrapper {
  a:focus-visible {
    border: 2px solid;
    border-radius:12px;
  }
}
    overflow: hidden;
    padding: 32px 0;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
  .special-deals-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    .button {
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
      min-width: fit-content;
      max-width: 200px; /* Limit button width */
    }
    .content{
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1; /* Allow content to take remaining space */
        min-width: 0; /* Allow content to shrink if needed */
    }
  }
  .special-offer-wrapper{
@media (min-width: 1232px) {
    overflow:hidden;
}
  }
  .heading {
    color: var(--global-colours-ai-red-r-600-brand, #b61032);

    /* Headings/H4 */
    font-family: var(--variable-font-family);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 30px */
    text-transform: uppercase;
    padding-bottom: 8px;
  }
  .sub-heading {
    color: #373737;

    /* Body/Body Large */
    font-family: var(--body-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    letter-spacing: 0.08px;
  }
  .image-card {
    display: flex;
    height: 114px;
    padding: 22px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 auto;
    border-radius: 12px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 18.9%,
        rgba(0, 0, 0, 0.5) 88.47%
      ),
      var(--card-bg) lightgray center / cover no-repeat;
    box-shadow: 0px 1px 3px rgba(30, 41, 59, 0.1),
      0px 1px 2px rgba(30, 41, 59, 0.05);
    position: relative;
    color: #fff;
    scroll-snap-align: center;
    .card-content {
      .card-heading {
        color: #fff;
        font-family: var(--variable-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 14px; /* 100% */
        text-transform: uppercase;
      }
      .card-description {
        color: #fff;
        font-family: var(--body-font-family);
        font-size: 8px;
        font-style: normal;
        font-weight: 400;
        line-height: 15px; /* 187.5% */
      }
    }
  }
  .special-offer-swipe-cards-wrapper {
    display: flex;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
  }
  .special-offer-swipe-cards {
    flex: 0 0 auto;
    width: 293px;
    max-width: 293px;
    /* Adjust width as needed */
    box-sizing: border-box;
  }
  .special-deals-image-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
  }
  .special-deals-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    object-position: left;
  }
  .swiper-pagination {
      display: flex;
      gap: 4px;
      align-items: center;
      margin-top: 24px;
      position:relative;
      width:100%;
      bottom:0;
      justify-content:center;

      .swiper-pagination-bullet {
          background: var(--Global-Colours-AI-Grey-G300,#b0b5bf);
          height: 5px;
          width: 5px;
          border-radius: 2.5px
      }

      .swiper-pagination-bullet.swiper-pagination-bullet-active {
          background: var(--AI_Red, #DA0E29);
      }
  }
  .swiper-pagination.special-deals-pagination:only-child,
.swiper-pagination.special-deals-pagination:has(.swiper-pagination-bullet:last-child:first-child) {
  display: none !important;
}
}

.partner-swiper-wrapper {
    overflow: hidden;
}
.dark-theme .partner-swiper{
    filter:grayscale(1);
}
.partner-swiper-outer-wrapper {
    padding-bottom: 0;

    .partner-swiper-card-outer-wrapper {
        width: 293px;

        @media (max-width: 576px) {
            width: 264px;
        }

        a {
            text-decoration: none;
        }

        a:focus {
            outline: none;
        }

        a:focus .partner-swiper-card-wrapper {
            box-shadow: inset 0 0 0 2px #000;
        }

        img.partner-icon {
            width: 32px;
            height:32px;

            @media (max-width: 576px) {
                width: 23px;
                height:23px;
            }
        }
        .arrow-icon-wrapper{
            height:25px;
            width:25px;
            @media (max-width: 576px) {
                height:23px;
                width:23px;
            }
        }
    }

    .partner-swiper-cards-wrapper {
        display: flex;
        padding: var(--Spacing-System-Spacing_2XLarge, 32px) 0;
        padding-bottom:0;

        .partner-swiper-card-wrapper {
            display: flex;
            padding: 16px 20px;
            align-items: center;
            gap: var(--Units-XS, 8px);
            flex: 1 0 0;
            border-radius: 12px;
            background: #FFF;
            justify-content: space-between;

            /* Inner flex */
            .partner-swiper-card-wrapper {
                display: flex;
                gap: 8px;
            }

            .icon-content-wrapper {
                display: flex;
                gap: 8px;
                align-items: center;
            }

            .card-label {
                color: var(--Text-Heading, #383C42);
                font-family: var(--variable-font-family, "AirIndia Variable");
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 125%;
                text-transform: uppercase;
                text-decoration: none;
            }

            .card-label:hover {
                text-decoration: underline;
            }
            transition: transform 0.2s ease, box-shadow 0.2s ease;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);

                .card-label {
                    text-decoration: underline;
                }
            }

        }
    }

    /* Ensure hover underline also works if parent wrapper hovers */
    .partner-swiper-card-wrapper:hover {
        .card-label {
            text-decoration: underline;
        }
    }

    .swiper-pagination {
        display: flex;
        gap: 4px;
        align-items: center;
        margin-top: 24px;
        position: relative;
        width: 100%;
        bottom: 0;
        justify-content: center;
        @media (min-width: 1232px) {
                display:none;
        }
        .swiper-pagination-bullet {
            background: var(--Global-Colours-AI-Grey-G300, #b0b5bf);
            height: 5px;
            width: 5px;
            border-radius: 2.5px;
        }

        .swiper-pagination-bullet.swiper-pagination-bullet-active {
            background: var(--AI_Red, #DA0E29);
        }
    }

    .swiper-pagination:only-child,
    .swiper-pagination:has(.swiper-pagination-bullet:last-child:first-child) {
        display: none !important;
    }
}

/* ========================================
   GRID CARDS - OPTIMIZED CSS
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* Hide or modify hover-specific elements */
    .grid-cards {
        .card-pretext,.card-heading,card-subheading{
        user-select:none;
        }
    }
  }
/* Base Grid Cards Styles */
.grid-cards p {
    margin-bottom: 0;
}

.grid-cards a.card-link-wrapper {
    height: 100%;
    width: 100%;
}

/* ========================================
   RESPONSIVE SLIDE WIDTHS
   ======================================== */
@media (min-width: 672px) and (max-width: 768px) {
    .grid-cards .swiper-slide:has(.ai-content-card) {
        width: calc(50% - 12px) !important;
    }
}

@media (max-width: 671px) {
    .grid-cards .swiper-slide:has(.ai-content-card) {
        width: 100% !important;
    }
}

/* ========================================
   CARD WRAPPER STYLES
   ======================================== */
.grid-cards .card-wrapper > div {
    padding: 0 10px;
}

@media (max-width: 768px) {
    .grid-cards .box-50, 
    .grid-cards .box-100 {
        margin-bottom: 12px;
    }

    .grid-cards .card-wrapper > div {
        width: 100%;
        margin-bottom: 20px;
    }

    .grid-cards .card-wrapper:has(.ai-content-card) > div {
        padding: 0;
    }
}

/* ========================================
   AI CARD STYLES
   ======================================== */
.grid-cards .ai-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 0;
    background: var(--Buttons-Secondary-Bg, #FFF);
    box-shadow: 0 1px 3px 0 rgba(30, 41, 59, 0.10), 0 1px 2px 0 rgba(30, 41, 59, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.grid-cards .ai-card img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 12px;
    transform: scale(1.0);
    transition: transform 2s ease-in-out, filter 1s ease-in-out,opacity 0.6s ease;
}

@media (max-width: 767px) {
    .grid-cards .ai-card img {
        border-radius: 15px;
    }
}

/* ========================================
   BOX LAYOUTS
   ======================================== */
.grid-cards .box-50 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grid-cards .box-50 .ai-card {
    height: 50%;
    max-height: 308px;
}

@media (max-width: 768px) {
    .grid-cards .box-50 .ai-card {
        height: 100%;
    }
}

.grid-cards .box-100 .ai-card {
    height: 100%;
    max-height: 640px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .grid-cards .box-100 .ai-card {
        max-height: 506px;
    }
    .grid-cards .row.card-wrapper.w-image {
        min-height: unset !important;
    }
    .grid-cards .box-50 .ai-card {
        height: 50%;
        max-height: 241px;
    }
}
/* ========================================
   IMAGE WRAPPER STYLES
   ======================================== */
.grid-cards .image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.grid-cards .image-wrapper div {
    height: 100%;
    width: 100%;
}

.grid-cards .image-wrapper img {
    transform: scale(1.0);
    transition: transform 2s ease-in-out, filter 1s ease-in-out,opacity 0.6s ease;
}

.grid-cards .image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(22, 37, 52, 0) 6.33%, rgba(0, 0, 0, 0.7) 100%);
    transition: all 1s ease-in-out;
    border-radius: 12px;
    filter: contrast(1.2);
    background-blend-mode: multiply;
}

/* ========================================
   CARD CONTENT STYLES
   ======================================== */
.grid-cards .card-content {
    padding: 32px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 768px) {
    .grid-cards .card-content {
        padding: 16px;
    }
}

.grid-cards .decorative-line {
    height: 2px;
    width: auto;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.54) 54.15%, rgba(255, 255, 255, 0.00) 100%);
    flex-shrink: 0;
    opacity: 1;
    transition: all .2s ease-in-out;
}

.grid-cards .card-pretext {
    color: #FFF;
    text-align: center;
    font-family: var(--variable-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: .12px;
    text-transform: uppercase;
}

.grid-cards .card-heading {
    color: #FFF;
    font-family: var(--variable-font-family);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    text-transform: uppercase;
}

.grid-cards .card-subheading.ai-body-large {
    color: #fff;
}

@media (max-width: 767px) {
    .grid-cards .card-subheading p {
        color: #FFF;
        text-align: center;
        font-family: "Nunito Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
    }
}

.grid-cards .description {
    color: #FFF;
    text-align: center;
    font-family: var(--body-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: .08px;
}

/* ========================================
   AI CONTENT CARD STYLES
   ======================================== */
.grid-cards .ai-content-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    border-radius: 12px;
    background: var(--Buttons-Secondary-Bg, #FFF);
    box-shadow: 0 1px 3px 0 rgba(30, 41, 59, 0.10), 0 1px 2px 0 rgba(30, 41, 59, 0.05);
    gap: 18px;
}

@media (max-width: 768px) {
    .grid-cards .ai-content-card {
        gap: 12px;
    }
}

.grid-cards .ai-content-card .ai-text {
    color: #1c1213;
    text-align: center;
}

.grid-cards .ai-content-card img {
    width: 100%;
}

/* Content Card Heights */
.grid-cards .box-50 .ai-content-card {
    height: 50%;
}

.grid-cards .box-100 .ai-content-card {
    height: 100%;
    min-height: 694px;
}

@media (max-width: 767px) {
    .grid-cards .box-100 .ai-content-card {
        min-height: 556px;
    }
}

/* ========================================
   GRADIENT STYLES FOR CONTENT CARDS
   ======================================== */
.grid-cards .ai-content-card.gradient-wrapper {
    position: relative;
    overflow: hidden;
}

.grid-cards .ai-content-card.gradient-wrapper .gradient-style-1,
.grid-cards .ai-content-card.gradient-wrapper .gradient-style-2,
.grid-cards .ai-content-card.gradient-wrapper .gradient-style-3 {
    z-index: 0;
}

.grid-cards .ai-content-card.gradient-wrapper > * {
    z-index: 1;
}

.grid-cards .ai-content-card.gradient-wrapper .card-content-wrapper {
    position: absolute;
    bottom: 0;
}

.grid-cards .ai-content-card .gradient-style-1 {
    width: 771px;
    height: 806px;
    left: -441px;
    top: -474px;
    position: absolute;
    background: linear-gradient(96deg, #f9f6ee 0%, rgba(248, 193, 180, 0.80) 64%);
    border-radius: 9999px;
    filter: blur(95.80px);
}

.grid-cards .ai-content-card .gradient-style-2 {
    width: 713.12px;
    height: 753.88px;
    left: 202.39px;
    top: -516.21px;
    position: absolute;
    transform: rotate(7.58deg);
    transform-origin: 0 0;
    opacity: .40;
    background: #bf004b;
    border-radius: 9999px;
    filter: blur(142.30px);
}

.grid-cards .ai-content-card .gradient-style-3 {
    width: 607px;
    height: 494px;
    left: 34px;
    top: -16px;
    position: absolute;
    opacity: .40;
    background: linear-gradient(90deg, #f9f6ee 0%, #f8c1b4 100%);
    border-radius: 9999px;
    filter: blur(131.90px);
}

/* ========================================
   CARD CONTENT WRAPPER STYLES
   ======================================== */
.grid-cards .ai-content-card .card-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.grid-cards .ai-content-card .card-content-wrapper .ai-text.ai-heading-h3 {
    color: var(--ai-color-red);
}

.grid-cards .ai-content-card .card-content-wrapper .ai-text.ai-heading-h4 {
    color: var(--ai-page-header-color);
}

.grid-cards .ai-content-card .card-content-wrapper .ai-text.ai-body-medium,
.grid-cards .ai-content-card .card-content-wrapper .ai-text.ai-body-large {
    color: var(--ai-color-muted-gray);
}

.grid-cards .ai-content-card .card-content-wrapper .ai-text.ai-subtitle-large-nunito {
    color: var(--ai-disabled-input-color);
}

/* ========================================
   TEXT CARDS V2 STYLES
   ======================================== */
.grid-cards .text-cards-v2-wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    gap: 24px;
}

.grid-cards .text-cards-v2-wrapper-desktop .swiper-controls-wrapper {
    display: none;
}

.grid-cards .text-cards-v2-mobile-wrapper {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
}

.grid-cards .text-card-v2-swiper {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 !important;
}

.grid-cards .text-card-v2 .gradient-image-wrapper {
    height: 373px;
}

@media (max-width: 768px) {
    .grid-cards .text-card-v2 {
        height: auto;
        width: 100%;
    }
}

.grid-cards .text-cards-v2-wrapper .ai-card {
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(22, 37, 52, 0.00) 6.33%, rgba(0, 0, 0, 0.70) 100%), url(../components/home/components/grid-cards/clientlibs/css/clientlibs/css/<path-to-image>) lightgray -433.617px 0 / 327.725% 100% no-repeat;
    box-shadow: 0 1px 3px 0 rgba(30, 41, 59, 0.10), 0 1px 2px 0 rgba(30, 41, 59, 0.05);
}

.grid-cards .text-cards-v2-wrapper .ai-card .card-content .description {
    color: #FFF;
    text-align: center;
    font-family: var(--body-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: .08px;
}

@media (max-width: 767px) {
    .grid-cards .text-cards-v2-wrapper .ai-card {
        transition: height .3s ease-in-out;
        height: 320px;
    }
}

/* ========================================
   SWIPER STYLES
   ======================================== */
.grid-cards .row.card-wrapper.w-image {
    min-height: 640px;
}

@media (max-width: 767px) {
    .grid-cards .row.card-wrapper.w-image {
        min-height: 100%;
        margin: 0;
    }
}

.grid-cards .swiper-slide .box-50,
.grid-cards .swiper-slide .box-100 {
    height: 100%;
    min-height: 556px;
}
.grid-cards .swiper-slide .box-100 .ai-content-card {
    min-height: inherit;
}
.grid-cards .swiper-slide .ai-content-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 266px;
}

.row.card-wrapper.swiper-wrapper.w-image {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 370px;
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .grid-cards .row.card-wrapper.swiper-wrapper.w-image a {
        padding: 0;
    }
}

/* ========================================
   SWIPER CONTROLS
   ======================================== */
.image-cards-wrapper .swiper-controls-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-cards-wrapper .swiper-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.image-cards-wrapper .swiper-controls button {
    all: unset;
    cursor: pointer;
}

.image-cards-wrapper .swiper-controls button span {
    display: flex;
}

.image-cards-wrapper .swiper-navigation {
    margin-top: 0;
}

.image-cards-wrapper .swiper-pagination {
    display: flex;
    height: 24px;
    gap: 4px;
    align-items: center;
}

@media (max-width: 767px) {
    .image-cards-wrapper .swiper-pagination {
        bottom: 26px;
        left: 0;
    }
}

/* ========================================
   CONTAINER STYLES
   ======================================== */
.container-bs.image-cards-wrapper {
    overflow: hidden;
}

.container-bs.image-cards-wrapper.swiper-initialized.swiper-horizontal.swiper-android {
    padding: 0 34px;
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */
@media (min-width: 640px) and (max-width: 767px) {
    .text-cards-v2-wrapper .w-image {
        overflow: visible !important;
    }
    
    .grid-cards .row > * {
        width: 90%;
    }
    
    .grid-cards .row > *:has(.ai-content-card) {
        width: 50%;
    }
}

@media (max-width: 639px) {
    .text-cards-v2-wrapper .w-image {
        overflow: visible !important;
    }
    
    .grid-cards .row > * {
        width: 90%;
    }
    
    .grid-cards .row > *:has(.ai-content-card) {
        width: 100%;
    }
}

/* ========================================
   HOVER EFFECTS & INTERACTIONS
   ======================================== */
.grid-cards .card-content .ai-button {
    cursor: pointer;
}

.grid-cards .ai-card .card-content > *:has(+ .ai-button) {
    transition: padding-bottom .3s ease-in-out;
}

.grid-cards .ai-card:has(.ai-button):hover .card-content > *:has(+ .ai-button) {
    padding-bottom: 0;
}

.grid-cards .ai-card:has(.ai-button) .card-content {
    position: absolute;
    bottom: 0;
    transition: all .3s ease-in-out;
    opacity: 1;
}

.grid-cards .ai-card:has(.ai-button):hover .card-content {
    bottom: 0;
    opacity: 1;
}

.grid-cards .ai-card:has(.ai-button):hover .decorative-line {
    opacity: 0;
    background: linear-gradient(40deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.6) 74.15%, rgba(255, 255, 255, 0.00) 100%);
}

.grid-cards .ai-card:has(.ai-button):hover img {
    transform: scale(1.05);
}

.grid-cards a.swiper-slide.swiper-slide-active .ai-card {
    height: 350px;
}

.grid-cards a.swiper-slide.swiper-slide-active img {
    transform: scale(1.1);
}

/* ========================================
   BUTTON ANIMATIONS
   ======================================== */
.grid-cards .ai-card .ai-button {
    height: 0;
    transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.grid-cards .ai-card:hover .ai-button {
    opacity: 1;
    height: 48px; /* 3pc = 48px */
}

.grid-cards .ai-card .ai-button:focus {
    opacity: 1;
    height: 48px;
    margin-top: 15px;
    padding: 0 16px; /* 1pc = 16px */
    outline: 1px solid #005fcc;
    outline-offset: 2px;
}

.grid-cards .ai-card .ai-button:focus a {
    outline: 1px solid #005fcc;
    border-radius: 8px;
}

.grid-cards .ai-card:focus-within .ai-button {
    opacity: 1;
    height: 48px;
    outline: 1px solid #005fcc;
    outline-offset: 2px;
}

.grid-cards .ai-card:focus-within .ai-button a {
    outline: 1px solid #005fcc;
    border-radius: 8px;
}

.swiper-nav-button-next,.swiper-nav-button-prev{
    img.disabled{
        display:none;
    }
}
.swiper-nav-button-next.swiper-button-disabled,.swiper-nav-button-prev.swiper-button-disabled{
    img.enabled{
        display:none;
    }
    img.disabled{
        display:block;
    }
}
.swiper-carousel {
    .custom-wrapper {
        display: flex;
        flex-wrap: nowrap;
        transition: transform .3s ease-in-out;
        overflow: hidden
    }

    .custom-wrapper.row {
        margin: 0;
        width: 100%
    }

    .banner-v1-s {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%
    }

    .swiper {
        width: 100%;
        overflow: hidden;
        position: relative;
        .swiper-controls-wrapper {
            position: absolute;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            left: 0;
            right: 0;
            bottom: 16px;
            flex-direction: column;
            gap: 4px;
            @media(max-width: 576px) {
                bottom:14px;
                justify-content:center;padding-right:0}

            @media(max-width: 576px) {
                justify-content:center;
                padding-right:0}

            @media(min-width: 576px) {
                bottom:16px
            }

            button.swiper-play-pause {
                border: 0px;
                border-radius: 50%;
                background: radial-gradient( closest-side, #010101c4 80%, transparent 80% 100% ), conic-gradient(#fff calc(0 * 1%), #a1a1a1 0);
                height: 24px;
                width: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0px;
                cursor: pointer;
                outline: none;
                span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 24px;
                    width: 24px;
                    padding: 10px;
                }
            }

            button.swiper-play-pause:focus {
                outline: 2px solid #000;
                outline-offset: 2px;
            }
        }

        .swiper-pagination {
            display: flex;
            height: 24px;
            gap: 4px;
            align-items: center;
            position: absolute;
            bottom: 26px;
            @media(min-width: 576px) {
                position:relative;
                width:100%;bottom:0;justify-content:center}

            .swiper-pagination-bullet {
                background: var(--Global-Colours-AI-Grey-G300,#b0b5bf);
                height: 5px;
                width: 5px;
                border-radius: 2.5px
            }

            .swiper-pagination-bullet.swiper-pagination-bullet-active {
                background: var(--Buttons-Secondary-Bg,#FFF)
            }
        }

        .swiper-button-prev,.swiper-button-next {
            border-radius: 33.333px;
            background: var(--Global-Colours-Base-White,#FFF);
            backdrop-filter: blur(8.333333015441895px);
            height: 24px;
            width: 24px;
            justify-content: center;
            align-items: center;
            display: flex;
            border: none;
            padding: 0;
            cursor: pointer;
            outline: none;
        }

        .swiper-button-prev:focus,.swiper-button-next:focus {
            outline: 2px solid #000;
            outline-offset: 2px;
        }

        .controls-wrapper {
            display: flex;
            gap: 12px;
            @media(min-width: 576px) {
                position: absolute;
                right:64px;
                gap:4px;
            }
        }
    }

    .mySwiperBanner {
        display: flex
    }
}

.swiper-carousel {
    .custom-wrapper {
        display: flex;
        flex-wrap: nowrap;
        transition: transform .3s ease-in-out;
        overflow: hidden
    }

    .custom-wrapper.row {
        margin: 0;
        width: 100%
    }

    .banner-v1-s {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%
    }

    .swiper-custom {
        width: 100%;
        overflow: hidden;
        position: relative;
        .row>* {
            padding-right: 0px !important;
            padding-left: 0px !important;
        }
        .swiper-controls-wrapper {
            position: absolute;
            align-items: center;
            left: 0;
            right: 0;
            bottom: 16px;
            flex-direction: row;
            padding-right: 64px;
            gap: 4px;
            height: 24px;
            @media(min-width: 768px) {
                padding-bottom: 70px;
            }
            @media(max-width: 576px) {
                bottom:14px;
                display: flex;
                justify-content:center;
                padding-right:0;
            }

            @media(min-width: 576px) {
                bottom:16px
            }

            button.swiper-play-pause {
                border: 0px;
                border-radius: 50%;
                background: radial-gradient( closest-side, #010101c4 80%, transparent 80% 100% ), conic-gradient(#fff calc(0 * 1%), #a1a1a1 0);
                height: 24px;
                width: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0px;
                span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 24px;
                    width: 24px;
                    padding: 4px;
                }
            }
        }

        .swiper-pagination {
            position: absolute;
            display: flex;
            height: 24px;
            gap: 4px;
            align-items: center;
            bottom: 26px;
            left: unset;
            width: unset;
            @media(min-width: 768px) {
                margin-bottom: 45px;
            }
            @media(min-width: 576px) {
                position: absolute;
                width:100%;
                bottom:0;
                justify-content:center;
            }

            .swiper-pagination-bullet {
                background: var(--Global-Colours-AI-Grey-G300,#b0b5bf);
                height: 5px;
                width: 5px;
                border-radius: 2.5px;
                opacity: 1;
            }

            .swiper-pagination-bullet.swiper-pagination-bullet-active {
                background: var(--Buttons-Secondary-Bg,#FFF)
            }
        }

        .swiper-custom-button-prev,.swiper-custom-button-next {
            border-radius: 33.333px;
            background: var(--Global-Colours-Base-White,#FFF);
            backdrop-filter: blur(8.333333015441895px);
            height: 24px;
            width: 24px;
            justify-content: center;
            align-items: center;
            display: flex
        }

        .controls-wrapper {
            position: absolute;
            right: 24px;
            display: flex;
            gap: 4px;
            z-index: 16;
            @media(max-width: 576px) {
                right: auto;
            }
        }
    }

    .mySwiperBanner {
        display: flex
    }
}

.swipe-cards{
    .swiper-controls-wrapper{
        display: flex;
        flex-direction: row-reverse;
    }
    p{
        all:unset;
    }
    .swipe-cards-wrapper{
        background: var(--Global-Colours-AI-Cream, #F9F6EE);
        padding: var(--Spacing-System-Spacing_2XLarge, 32px) 0px;
        @media screen and (max-width: 576px) {
            padding: var(--Spacing-System-Spacing_Large, 24px) 0px;
        }
        .swiper-container{
            overflow:hidden;
            .swipe-cards-container{
                @media screen and (min-width: 1232px) {
                    overflow:hidden;
                }
            }
        }
    }
    .component-content{
        padding-bottom:24px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .custom-swiper-wrapper{
        display: flex;
    }
    .ai-card{
        position:relative;
        border-radius: 12px;
        box-shadow: 0px 1px 3px 0px rgba(30, 41, 59, 0.10), 0px 1px 2px 0px rgba(30, 41, 59, 0.05);
        overflow: hidden;
        height: 400px;
        width: calc(1192px / 3);
        @media screen and (max-width: 1024px) {
            height: 324px;
            width: calc(936px / 3);
        }
        @media screen and (max-width: 992px) {
            height: 300px;
            width: 300px;
        }
    }
    .image-wrapper::after{
        content:'';
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 18.9%, rgba(0, 0, 0, 0.80) 88.47%), url(../components/home/components/swipe-cards/clientlibs/css/<path-to-image>) lightgray -35.704px 0px / 166.667% 100% no-repeat, #D7D7D7;
        transition:all 1s ease-in-out;
        border-radius:12px;
        filter:contrast(1.2);
        background-blend-mode:multiply
    }
    .ai-card .card-content{
        position:absolute;
        bottom:0;
        padding:32px;
        display:flex;
        flex-direction:column;
        gap:8px;
        .card-title, .card-subheading{
            color:#fff;
        }
        @media screen and (max-width: 1024px) {
            padding:16px;
        }
    }
    .ai-card .card-content > *:has(+ .ai-button) {
        transition: padding-bottom 0.3s ease-in-out;
    }

    .ai-card:has(.ai-button):hover .card-content > *:has(+ .ai-button) {
        padding-bottom: 0px;
    }

    .ai-card:has(.ai-button) .card-content {
        position: absolute;
        bottom: 0px;
        transition: all 0.3s ease-in-out;
        opacity: 1;
    }

    .ai-card:has(.ai-button):hover .card-content {
        bottom: 0px;
        opacity: 1;
    }
    .ai-card:has(.ai-button):hover .decorative-line {
        opacity: 0;
        background: linear-gradient(40deg, rgba(255, 255, 255, 0.00) 0, rgba(255, 255, 255, 0.6) 74.15%, rgba(255, 255, 255, 0.00) 100%);
    }
    .ai-card img {
        transition: transform 2s ease-in-out, filter 1s ease-in-out,opacity 0.6s ease;
        height: 400px;
        width: calc(1192px / 3);
        object-fit: cover;
        @media screen and (max-width: 1024px) {
            height:324px;
            width:calc(936px / 3);
        }

        @media screen and (max-width: 992px) {
            height:300px;
            width:300px;
        }
    }
    .ai-card:has(.ai-button):hover img {
        transform: scale(1.05);
    }
    .ai-card .ai-button {
        height: 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
    }

    /* Button appears on card hover */
    .ai-card:hover .ai-button {
        opacity: 1;
        height: 3pc;
    }

    /* Focus styles for accessibility */
    .ai-card .ai-button:focus {
        opacity: 1;
        height: 3pc;
        margin-top: 15px;
        padding: 0 1pc;
        outline: 1px solid rgb(0, 95, 204);
        outline-offset: 2px;
        a{
            outline: 1px solid rgb(0, 95, 204);
            border-radius:8px;
        }
    }

    /* Ensure button shows on focus even without hover */
    .ai-card:focus-within .ai-button {
        opacity: 1;
        height: 3pc;
        outline: 1px solid rgb(0, 95, 204);
        outline-offset:2px;
                a{
                    outline: 1px solid rgb(0, 95, 204);
                    border-radius:8px;
                }
        }
}
.mini-banner-wrapper {
   height: 60px;
   margin-top:1pc;
    .banner-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
            .mini-banner-logo {
                width: 55px;
                height: 30px;
            }
    }
}

.mini-banner-wrapper .mini-banner-outer {
    display: flex;
    padding: 5px 14px 5px 8px;
    align-items: flex-start;
    gap: 203.8px;
    height: 100%;
    overflow: hidden;

    border-radius: var(--Border_Radius-XS, 8px);
    border: 1px solid var(--Global-Colours-AI-Gold-Light, #FED9A0);
    background: var(--Gradient-BG-First-Class, linear-gradient(90deg, #F9F6EE -18.09%, #F8C1B4 100%));

    box-shadow: 0px 1px 3px 0px rgba(30, 41, 59, 0.10), 0px 1px 2px 0px rgba(30, 41, 59, 0.05);
}

.mini-banner-content {
   color: var(--Text-Text_Body, #494E5C);
   font-family: var(--variable-font-family);
   font-size: 10px;
   font-style: normal;
   font-weight: 400;
   line-height: 125%; /* 12.5px */
   letter-spacing: 0.1px;
   text-transform: uppercase;
   width: 62.2px;
   margin: 0px;
}

/* Clickable banner styles */
.mini-banner-wrapper a.clickable-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease-in-out;
    
    .mini-banner-logo {
        width: 55px;
        height: 30px;
    }
}
.loyalty-component{
        background: #F9F6EE;
        .user-email a[x-apple-data-detectors],
        .user-email a[x-apple-data-detectors] * {
          color: inherit !important;
          text-decoration: none !important;
          font-size: inherit !important;
          font-family: inherit !important;
          pointer-events: none;
        }
        .loyalty-content{
            padding-right:20px;
            @media (max-width: 1024px) {
                padding-right:0;
            }
            display:flex;
            flex-direction:column;
            gap:24px;
        }
        a.partner-offers-carousel{
            width:100%;
        }
        .loyalty-heading{
            justify-content:space-between;
            align-items: center;
        }
        .loyalty-description .ai-text.ai-body-medium{
            color: #373737;
        }
        .loyalty-maharaja-icon{
            img{
                height:100%;
            }
        }
        .loyalty-offer-card-wrapper{
            p{
                margin-bottom: 0;
            }
        }
        .loyal-component-wrapper{
            display: flex;
            padding-top: 48px;
            padding-bottom: 48px;
            @media (max-width: 1024px) {
                display:block;
                .loyalty-carousel,.loyalty-content{
                    width:100%;
                }
                .loyalty-carousel .loyalty-carousel-slide img{
                    max-height:350px;

                }
            }
            .loyalty-carousel{
                margin-bottom: 24px;
                .swiper-wrapper.row {
                    margin: 0;
                    height: 100%;
                    @media (min-width: 1025px) {
                        margin-bottom: -60%;
                    }
                }
                .carousel-wrapper{
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.50) 100%);
                    box-shadow: 0px 1px 2px rgba(30, 41, 59, 0.05);
                    border-radius: 12px;
                    overflow:hidden;
                    position:relative;
                    height:100%;
                }
                .icon-pause,icon-play{
                    height:24px;
                    display:flex;
                    align-items:center;
                }
                button.swiper-play-pause{
                    background: 0;
                    border: 0;
                    color: inherit;
                    font: inherit;
                    margin: 0;
                    padding: 0
                }

            }
            .loyalty-carousel-slide{
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                overflow: hidden;
                width: 100%;
                height: 100%;
                min-height: 400px;
                .brand-logo{
                    position:absolute;
                    right:20px;
                    top:36px;
                    @media (max-width: 1024px) {
                        top:20px;
                    }
                }
                .image-wrapper::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(0,rgba(0,0,0,0.7) 0,rgba(0,0,0,0.61) 20%,rgba(0,0,0,0) 46%);
                    padding:0;
                }
                .image-wrapper {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    overflow: hidden;
                    
                    img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                        max-width: none;
                        max-height: none;
                        display: block;
                    }
                    
                    /* Override any potential wrapper containers from commons */
                    & > * {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
                .carousel-content{
                    position:absolute;
                    bottom:74px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    max-width:260px;
                    text-align:center;
                    left: 50%;
                    transform: translateX(-50%);
                    .description{
                        color: #FFF;
                        text-align: center;

                        /* Body/Body Large */
                        font-family: var(--body-font-family);
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 140%; /* 22.4px */
                        letter-spacing: 0.08px;
                    }
                }
                .label{
                    position:absolute;
                    top:0;
                    border-radius: 0px 0px var(--Border_Radius-XS, 8px) var(--Border_Radius-XS, 8px);
                    background: var(--Buttons-Primary-BG, #DA0E29);
                    box-shadow: 0px 10px 15px -3px rgba(30, 41, 59, 0.10), 0px 4px 6px -2px rgba(30, 41, 59, 0.05);
                    padding: var(--Spacing-System-XS, 8px);
                    z-index: 1;
                    left: 24px;
                    color: #FFF;
                    text-align: center;
                    font-family: var(--variable-font-family);
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 140%; /* 19.6px */
                    letter-spacing: 0.14px;
                    text-transform: uppercase;
                    @media (max-width: 575px) {
                        font-size: 8px;
                        letter-spacing: 0.08px;
                    }
                }
            }
        }
        .swiper-controls{
            position: absolute;
            bottom: 26px;
            display: flex;
            width: 100%;
            gap: 4px;
            z-index: 1;
            justify-content: center;
            align-items: center;
        }
        .swiper-pagination{
            display: flex;
            height: 24px;
            gap:4px;
            align-items:center;
            @media(max-width:576px) {
                bottom:26px;
                left:0;
            }
        }

        .loyalty-profile-card{
            display: flex;
            padding: 16px;
            flex-direction: row;
            justify-content: space-between;
            flex: 1 0 0;
            align-self: stretch;
            border-radius: 16px;
            background: var(--Global-Colours-Base-White, #FFF);
            box-shadow: 0px 1px 3px 0px rgba(30, 41, 59, 0.10), 0px 1px 2px 0px rgba(30, 41, 59, 0.05);
            margin-bottom:24px;
            align-items: flex-end;
            .welcome-text{
                color: var(--Text-Text_Heading, #383C42);

                /* Subtitle/Subtitle_M_N */
                font-family: "Nunito Sans";
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: 125%; /* 17.5px */
            }
            .user-name{
                color: var(--Text-Text_Heading, #383C42);

                /* Headings/H3 */
                font-family: var(--variable-font-family);
                font-size: 28px;
                font-style: normal;
                font-weight: 500;
                line-height: 125%; /* 35px */
                text-transform: uppercase;

            }
            .user-details{
               display: flex;
                .user-email{
                    color: var(--Text-Text_Heading, #383C42);

                    /* Body/Body Small_SemiBold */
                    font-family: var(--body-font-family);
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 140%; /* 16.8px */
                    letter-spacing: 0.048px;
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            .loyalty-user-content{
                gap:8px;
                flex-direction:column;
            }
            .points-wrapper{
                display:flex;
                justify-content:flex-end;
                align-items:center;
                gap:24px;
                width:100%;

                .points-content{
                    text-align: right;
                    .points{
                        color: var(--Global-Colours-AI-Base-AI-Black, #1C1213);

                        /* Headings/H4 */
                        font-family: var(--variable-font-family);
                        font-size: 24px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 125%; /* 30px */
                        text-transform: uppercase;
                    }
                    .points-text{
                        color: var(--Global-Colours-AI-Base-AI-Black, #1C1213);
                        text-align: right;

                        /* Subtitle/Subtitle_S-N */
                        font-family: "Nunito Sans";
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 125%; /* 15px */
                    }
                }

            }

        }
        .loyalty-offer-card-wrapper {
            .container .row {
                /* Ensure row uses flexbox */
                display: flex;
                flex-wrap: wrap;
                margin: 0;
            }

            .container .row .col-md-6 {
                /* Ensure columns stretch to full height */
                display: flex;
                margin-bottom: 24px;
            }

            .loyalty-offer-card {
                display: flex;
                padding: 16px;
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
                /* Remove fixed flex properties that prevent growth */
                flex: 1;
                width: 100%;
                align-self: stretch;
                border-radius: 12px;
                background: var(--Global-Colours-Base-White, #FFF);

                /* Elevation/XS */
                box-shadow: 0px 1px 3px 0px rgba(30, 41, 59, 0.10),
                            0px 1px 2px 0px rgba(30, 41, 59, 0.05);

                height: 100%;           /* Take full height of parent column */
                min-height: auto;       /* Allow natural content sizing */

                .card-heading {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    flex-shrink: 0;     /* Prevent heading from shrinking */
                }

                .ai-body-medium {
                    color: #373737;
                    font-weight: 400;
                    flex: 1;            /* Allow description to grow and fill space */
                    display: flex;
                    align-items: flex-start;
                }
            }

            p {
                margin-bottom: 0;
            }
        }

        /* Alternative approach if Bootstrap classes interfere */
        .loyalty-offer-card-wrapper {
            .row {
                display: flex !important;
                flex-wrap: wrap !important;
                
                .col-md-6 {
                    display: flex !important;
                    
                    .loyalty-offer-card {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        /* For older browsers or if flexbox issues persist */
        @supports not (display: flex) {
            .loyalty-offer-card-wrapper .row {
                display: table;
                width: 100%;
                table-layout: fixed;
                
                .col-md-6 {
                    display: table-cell;
                    vertical-align: top;
                }
            }
        }
        @media (max-width: 768px) {
            .loyalty-profile-card{
                flex-direction:column;
                gap: var(--Spacing-System-S, 12px);
                .points-wrapper{
                    justify-content:space-between;
                    .points-content{
                        text-align:left;
                    }
                }
            }
        }
}
.best-offers-wrapper {
    h1.ai-text{
        margin-bottom:0;
    }
    padding: 32px 0;
    .ai-card:hover{
        .image-wrapper {
            img{
                transform: scale(1.05);
            }
        }
    }
    .component-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 24px;
        .content-wrapper{
            display:flex;
            flex-direction:column;
            gap:8px;
        }
    }
    .ai-card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 14.863px;
        @media(max-width:576px) {
            border-radius: 12px;
        }
        .card-subheading p{
            margin-bottom: 0;
        }
        .image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            img {
                aspect-ratio: auto;
                height: 32vw;
                max-height:329px;
                width: 100%;
                border-radius: 12px;
                background: linear-gradient(
                    0deg,
                    rgba(0, 0, 0, 0.7) 0%,
                    rgba(0, 0, 0, 0.56) 10%,
                    rgba(0, 0, 0, 0) 50%
                  ),
                  url(../components/home/components/best-offers/clientlibs/css/<path-to-image>) lightgray -37.359px 0px / 178.587% 100% no-repeat;
                box-shadow: 0px 1px 3px 0px rgba(30, 41, 59, 0.1),
                  0px 1px 2px 0px rgba(30, 41, 59, 0.05);
                object-fit: cover;
                transition: transform 2s ease-in-out, filter 1s ease-in-out,opacity 0.6s ease;
                @media(max-width:767px) {
                    height:44vw;
                    min-height:195px;
                }
            }
        }
        /* Gradient overlay */
        .image-wrapper::after {
            content: ""; /* Empty content to create the pseudo-element */
            position: absolute; /* Position it over the image */
            bottom: 0;
            left: 0;
            width: 100%; /* Cover the entire container */
            height: 100%; /* Cover the entire container */
            background: linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.7) 0%,
                rgba(0, 0, 0, 0.61) 20%,
                rgba(0, 0, 0, 0) 46%
            );
            border-radius: 12px;
        }
        .card-content {
            position: absolute;
            bottom: 0;
            padding: 24px 16px;
            width: 100%;
            gap: 8px;
            flex-direction: column;
            display: flex;
            @media(max-width:576px) {
                gap: 4.55px;
            }
            .card-heading {
                color: var( --ai-color-white);
                font-family: var(--variable-font-family);
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: 125%;
                text-transform: uppercase;
                @media screen and (max-width: 1200px) {
                  font-size: 16px;
                }
            }
            .card-class {
                color: var( --ai-color-white);
                font-family: var(--variable-font-family);
                font-size: 16px;
                font-style: normal;
                line-height: 125%; /* 20px */
                @media(max-width:576px) {
                    font-size:10px;
                }
            }
        }
    }
}

.awards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--ai-spacing-5xl);
    padding: var(--ai-spacing-2xl) 0;
    background: var(--ai-color-white, #FFF);
}

.awardItemWrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ai-spacing-l);
    margin:0;
    padding:0;

    @media (max-width: 1024px) {
        justify-content: space-evenly;
    }
}

.awardItemWrapper .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    max-width: 230px;
    gap: var(--ai-spacing-l);
    padding:0;
    @media (max-width: 1024px) {
        max-width: 164px;
        gap:12px;
    }

    @media (min-width: 563px) and (max-width: 767px) {
        max-width: 195px;
    }

    @media (min-width: 536px) and (max-width: 562px) {
        max-width: 185px;
    }

    @media (min-width: 480px) and (max-width: 535px) {
        max-width: 176px;
    }
    @media (max-width: 479px) {
        max-width: 137px;
    }
}

.awardItemWrapper .item img {
    width: 100%;
    height: auto;
    display: block;
}

.award-card .ai-text {
    text-align: center;

    @media (min-width: 576px) and (max-width: 1024px) {
        font-size: 12px;
    }
    @media (max-width: 575px) {
        font-size: 9.53px;
    }
}
.awards-heading{
    text-align:center;
    padding-bottom: var(--ai-spacing-5xl);
    @media (max-width: 1024px) {
        padding-bottom: var(--ai-spacing-m);
    }
}
.ai-home-booking-wrapper{
        margin-top:16px;
        padding:16px;
        border-radius: 12px;
        box-shadow: 0px 1px 3px 0px rgba(30, 41, 59, 0.10), 0px 1px 2px 0px rgba(30, 41, 59, 0.05);
        @media only screen and (max-width: 992px) {
            padding: 12px;
        }
}
    /* Container for the entire banner */
.row .banner-v1{
    padding:0;
}
.banner-v1{
    span.swiper-notification {
        display: none;
    }
}
.swiper-carousel{
    margin-top:1pc;
}
.swiper-carousel {
    .swiper-controls-wrapper.container-bs{
        z-index:2;
    }
    .swiper-initialized{
        .banner-v1{
            z-index:0;
        }
        .banner-v1.swiper-slide-active{
            z-index:1;
        }
    }
}
.banner-v1-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    height: 360px;
    .image-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Ensure it stays behind content */
        overflow: hidden;
        border-radius: 12px;

        /* Target the image component specifically */
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right;
            border-radius: 12px;
            max-width: none;
            max-height: none;
            display: block;
        }

        /* Override any potential wrapper containers from commons */
        & > * {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    /* Gradient overlay */
    .image-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        z-index: 2; /* Above image, below content */
    }
}

/* Container for the image and text */
.banner-v1-wrapper .banner-v1-outer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    gap: 48px;
    z-index: 3; /* Ensure this stays above everything */
    border-radius: 12px;
    overflow: hidden;
}

/* Banner text styling */
.banner-content {
    font-size: 24px;
    color: white;
    font-weight: bold;
    position: absolute;
    z-index: 4;
    left: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-System-Spacing_Medium, 16px);
    margin-left: 24px;

    @media(max-width:576px) {
       padding: 16px;
       margin-left: 0;
       top: 16px;
    }
}
.banner-content .brand-logo {
    height:32px;
    @media(max-width:576px) {
       height:26px;
    }
}
.banner-content h2,
.banner-content h1 {
    color: #FFF;

    /* Headings/H2 */
    font-family: var(--variable-font-family);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 40px */
    text-transform: uppercase;
    max-width:400px;
    margin:unset;
    padding:unset;

    @media(max-width:576px) {
        font-size: 24px;
    }
}

.banner-content p {
    color: #FFF;

    /* Body/Body Medium */
    font-family: var(--variable-font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 19.6px */
    letter-spacing: 0.035px;
    max-width:370px;
    margin:unset;
    padding:unset;
    @media(max-width:576px) {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.048px;
    }
}

/* Styling for the image */
.img-carousal {
    object-fit: cover; /* Ensure the image fills the container without distortion */
    width: 100%; /* Make the image take full width of the container */
    height: 100%; /* Make the image take full height of the container */
    border-radius: 12px; /* Apply rounded corners to the image */
}



    /* Booking */

    .booking-form{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Spacing-System-Spacing_S, 12px);
        align-self: stretch;
        border-radius: 12px;
        background: var(--Global-Colours-Base-White, #FFF);
        margin-top: 16px;
        /* Elevation/Bottom/XS */
        box-shadow: 0px 1px 3px 0px rgba(30, 41, 59, 0.10), 0px 1px 2px 0px rgba(30, 41, 59, 0.05);
    }