/* Container styles */
    .container-city {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    .section-city {
        padding: 16px 0;
    }

    .section-city-bk{
        padding: 12px 0;
    }

    .section-heading{
        padding: 24px 16px 0px 16px;
    }

    .section-heading-container{
        max-width: 1400px;
        margin: 0 84px;
    }

    .section-title {
        text-align: left;
        font-size: 36px;
        font-weight: 500;
        line-height: 100%;
        color: #4A266E;
        margin-bottom: 15px;
    }
    
    .section-subtitle {
        text-align: left;
        font-size: 18px;
        font-weight: 400;
        color: #4A266E;
    }
    
    /* Typography */
    .heading-city {
        font-size: 28px;
        font-weight: 500;
        color: #333333;
        margin-bottom: 30px;
        margin-left: 0; /* Ensure no extra left margin */
      }

      .heading-city-bk {
        font-size: 28px;
        font-weight: 500;
        color: #4A266E;
        margin-bottom: 28px;
        text-align: center;
      }

      .heading-city-artist{
        font-size: 36px;
        font-weight: 500;
        color: #4A266E;
        margin-bottom: 30px;

      }

      .heading-city-artist-1{
        font-size: 28px;
        font-weight: 500;
        color: #333333;
        margin-bottom: 30px;

      }
    
    /* venue Card styles */
    .venue-card {
        display: flex;
        flex-direction: column;
        width: 280px;
    }
    
    .venue-card__image-container {
        overflow: hidden;
        border-radius: 5px;
    }
    
    .venue-card__image {
        width: 100%;
        height: 170px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .venue-card__image:hover {
        transform: scale(1.05);
    }
    
    .venue-card__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 17.6px;
        padding-top: 20px;
        color: #333333;
    }  

    .venue-card-title-artist {
        font-size: 16px;
        font-weight: 600;
        line-height: 17.6px;
        color: #333333;
    }
    
    /* Carousel styles */
    .carousel-city {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carousel-city-bk {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9E2FFCC;
    }
    
    .carousel__grid-city {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4rem;
        justify-content: center;
    }
    
    /* Navigation buttons */
    .nav-button-city {
        position: absolute;
        top: 45%;
        background-color: transparent;
        border: none;
        display: block;
        padding: 0 10px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .nav-button-city-bk {
        position: absolute;
        top: 35%;
        background-color: transparent;
        border: none;
        display: block;
        padding: 0 10px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .nav-button-city-artist {
        position: absolute;
        top: 40%;
        background-color: transparent;
        border: none;
        padding: 0 10px;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .nav-button-city:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .nav-button--prev {
        left: 1rem;
        transform: translateY(-50%);
    }
    
    .nav-button--next {
        right: 1rem;
        transform: translateY(-50%);
    }
    
    /* Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 64px;
        gap: 0.5rem;
        margin-top: 32px;
    }

    .pagination-bk {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 32px;
    }

    .mb-36{
        margin-bottom: 36px;
    }

    .h1-city {
        font-size: 40px;
    }

    .carousel__pagination-city{
        display: flex;
        justify-content: space-between;
        align-items: center;  
        margin-top: 24px;
    }

    .carousel__pagination-city-bk{
        align-items: center;  
        margin-top: 28px;
    }

    .pagination__dot {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: #ddd;
        border: none;
        cursor: pointer;
        padding: 0;
        box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
      }
      

      .pagination__dot-bk {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: #fff;
        border: none;
        cursor: pointer;
        padding: 0;
        box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
      }
      
      .pagination__dot:hover {
        background-color: #9ca3af;
      }
      
      .pagination__dot--active {
        background-color: #4A266E;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        transform: scale(1.3);
      }
    
    /* View all link */
    .view-all {
        display: inline-flex;
        align-items: center;
        color: #4A266E;
        font-weight: 600;
        text-decoration: none;
        justify-content: center;
    }

    .view-all-bk{
        display: inline-flex;
        align-items: center;
        color: #4A266E;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid #4A266E;
        padding: 13px 92px;
        border-radius: 10px;
        justify-content: center;
    }

    
    
    .view-all:hover {
        color: #5b21b6;
    }

    .view-all-bk:hover{
        color: #ffffff;
        background-color: #4A266E;
    }

    .arrow-icon {
        margin-left: 10px;
    }

    .view-all-bk:hover .arrow-icon {
        content: url("../../media/stash_arrow-up-light.svg");
    }
    

    
    
    .view-all svg {
        margin-left: 0.5rem;
    }

    .view-all-img {
        padding-left: 10px;
    }

    .price-container {
        display: flex;
        justify-content: space-between;
    }

    .price-div {
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        gap: 6px;
    }

    .rupee-icon{
        margin-top: 10px;
    }

    .vendor-enquire-button{
        background-color: #ffffff;
        border: 1px solid #F04E58;
        padding: 13px 16px;
        margin-top: 10px;
        border-radius: 10px;
        color: #F04E58;
        font-weight: 400;
    }
    
    /* Mobile styles */
    .mobile-carousel {
        display: none;
        padding: 0 16px;
    }

    .Carousel-Mobile-view{
        display: none;
        margin-left: 16px;
    }

    .Carousel-Mobile-view-bk{
        display: none;
        margin-left: 16px;
        padding-bottom: 16px;
    }

    /* Benefits section */


    .benefits-section {
        padding: 20px 8px 40px 8px;
        background-color: #E9E2FF;
    }
    
    .benefits-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .benefits-title {
        text-align: center;
        font-size: 28px;
        font-weight: 600;
        color: #4A266E;
        margin-bottom: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .benefits-title-icon {
        color: #6366f1;
        font-size: 2rem;
    }
    
    .benefits-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
    
    .benefit-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .benefit-icon {
        width: 100px;
        height: 100px;
        background-color: #F04E58;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        color: white;
    }
    
    .benefit-card-title {
        color: #333;
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 25px;
        font-weight: 600;
    }
    
    .benefit-description {
        color: #333333;
        font-size: 16px;
        line-height: 24px;
    }

    /* Testimonial Section */
    .testimonial-section {
        padding: 20px 16px;
        background-color: #fff;
    }
    
    .testimonial-container {
        max-width: 1400px;
        margin: 0 auto;
        position: relative;
    }
    
    .testimonial-title {
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        color: #333;
        margin-bottom: 20px;
    }
    
    .testimonial-subtitle {
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        color: #333;
        margin-bottom: 50px;
    }
    
    .testimonial-carousel {
        position: relative;
        padding: 2rem 0;
        display:block
    }

    .testimonial-carousel-mobile{
        display: none;
    }
    
    .testimonial-content {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .testimonial-image-container {
        flex: 0 0 50%;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .testimonial-image {
        width: 585px;
        height: 313px;
        object-fit: cover;
        border-radius: 10px;
    }

    .testimonial-image-mobile{
        text-align: center;
    }
    
    .navigation-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1rem;
    }
    
    .testimonial-quote-container {
        flex: 1;
        position: relative;
        padding: 82px 0px 0px 100px;
    }
    
    .testimonial-quote {
        font-size: 16px;
        line-height: 28px;
        font-weight: 500;
        color: #666666;
        margin-bottom: 14px;
    }
    
    .testimonial-event-name {
        color: #F04E58;
        font-size: 18px;
        font-weight: 700;
        line-height: 23px;
    }

    .testimonial-event-name-mobile {
        color: #F04E58;
        font-size: 18px;
        font-weight: 700;
        line-height: 23px;
        padding: 0px 28px;
    }

    .quote-mark-icon {
        width: 75px;
        height: 75px;
        background-color: #F04E58;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        color: white;
    }
    
    .quote-mark { 
        position: absolute; 
    }
    
    .quote-mark-start {
        top: -1rem;
        left: 0;
    }
    
    .quote-mark-end {
        bottom: -1rem;
        right: 0;
    }
    
    .nav-button {
        background: none;
        border: none;
        cursor: pointer;
        color: #e86d6d;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.3s ease;
    }
    
    .nav-button:hover {
        color: #d45555;
    }
    
    .testimonial-dots {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
    }
    
    .dot {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        background-color: #ddd;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all 0.3s ease;
    }
    
    .dot.active {
        background-color: #4A266E;
        transform: scale(1.3);
    }
    

    /* Venue Categories Section */
    .venue-categories {
        padding: 4rem 1rem;
        background-color: #fff;
    }
    
    .venue-container-categories {
        max-width: 1200px;
        display: block;
        margin: 0 auto;
    }
    
    .venue-title-categories {
        text-align: left;
        font-size: 36px;
        font-weight: 500;
        color: #4A266E;
        margin-bottom: 40px;
    }
    
    .venue-grid-categories-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .venue-grid-categories-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    .venue-grid-categories-5 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 25px;
    }

    .venue-grid-categories-6 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 25px;
    }
    
    .venue-card-categories {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    
    .venue-card-categories:hover {
        transform: translateY(-5px);
    }
    
    .venue-image-container-categories {
        width: 185px;
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .venue-image-categories {
        width: 100%;
        height: 250px;
        border-radius: 10px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .venue-card-categories:hover .venue-image-categories {
        transform: scale(1.05);
    }
    
    .venue-category-title {
        font-size: 16px;
        line-height: 17.6px;
        font-weight: 600;
        color: #333;
    }

    /* Venue Areas Section */
    .venue-areas {
        padding: 24px 16px 42px 16px;
        background-color: #E9E2FFCC;
    }
    
    .areas-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .areas-title {
        text-align: left;
        font-size: 36px;
        font-weight: 500;
        color: #4A266E;
        margin-bottom: 15px;
    }
    
    .areas-subtitle {
        text-align: left;
        font-size: 16px;
        font-weight: 400;
        color: #4A266E;
        margin-bottom: 30px;
    }
    
    /* .areas-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between;
    } */

    .areas-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 20px;
    }
    
    .area-button {
        display: flex;
        align-items: center;   /* vertical centering */
        justify-content: center; /* horizontal centering */
        padding: 14px 36px;
        background-color: white;
        border: 1px;
        border-radius: 10px;
        border-color: #888888;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        color: #333;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .area-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #4a2b82;
        color: white;
    }

    /* Blog Section  */

    .blogHeading-city {
        text-align: center;
        font-size: 36px;
        font-weight: 500;
        color: #4A266E;
        margin-bottom: 15px;
    }

    .blogSubHeading-city {
        text-align: center;
        font-size: 22px;
        font-weight: 400;
        line-height: 100%;
        color: #4A266E;
    }

    .cities-section-heading{
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        line-height: 100%;
        color: #333333;
        margin-bottom: 32px;
    }


    @media (max-width: 1024px) {

        /* Benefits Section */

        .benefits-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        /* Testimonial Section */

        .testimonial-content {
            flex-direction: column;
            align-items: center;
            gap: 32px;
        }
        
        .testimonial-image-container {
            flex: 0 0 100%;
        }

        .testimonial-quote-container {
            
            padding: 20px 0px 0px 100px;
        }

        /* Heading Section */

        .section-title {
            font-size: 32px;
        }
    
        .section-subtitle {
            font-size: 15px;
        }

        .section-heading-container {
            margin: 0;
        }

        /* mobile Carousel */
        .carousel-city,
        .carousel-city-bk {
        display: none;
        }

        .Carousel-Mobile-view,
        .Carousel-Mobile-view-bk {
            display: block;
        }

        .section-city-bk{
            background-color: #E9E2FFCC;
        }

        .view-all-button-container {
            display: flex;
            justify-content: center;
        }

        .mobile-carousel {
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            display: flex;
            gap: 16px;
            padding: 16px 0 0 0;
        }
        
        .mobile-carousel__container {
            display: flex;
            gap: 39px;
        }
        
        .mobile-carousel__item {
            flex: 0 0 auto;
            width: 80%;
            max-width: 280px;
            scroll-snap-align: center;
        }
    
        .view-all-bk{
                display: inline-flex;
                align-items: center;
                color: #4A266E;
                font-weight: 600;
                text-decoration: none;
                border: 1px solid #4A266E;
                padding: 13px 37%;
                border-radius: 10px;
                justify-content: center;
            }
    
            .view-all-bk:hover {
                background-color: inherit !important;
                color: inherit !important;
                border: inherit !important;
                text-decoration: inherit !important;
            }
        
            .venue-grid-categories-3,
            .venue-grid-categories-4,
            .venue-grid-categories-5,
            .venue-grid-categories-6{
                display:none;
            }


    }


     @media (max-width: 768px) {

        .section-heading-container {
            margin: 0 20px;
        }
    
        .section-title {
            font-size: 28px;
        }
    
        .section-subtitle {
            font-size: 14px;
        }

        .section-city-bk{
            background-color: #E9E2FFCC;
        }

        .heading-city{
            margin-bottom: 8px;
        }

        .heading-city-artist{
            font-size: 22px;
            line-height: 32px;
            font-weight: 600;
            color: #4A266E;
            margin-bottom: 30px;

        }

        .heading-city-artist-1{
            font-size: 20px;
            font-weight: 700;
            line-height: 16px;
            color: #333333;
            margin-bottom: 30px;
    
        }

        .view-all-button-container {
            
            justify-content: start;
        }

        /* Venue Categories Section */

        .venue-categories{
            padding: 20px 16px;
        }


        .venue-title-categories {
            text-align: left;
            font-size: 32px;
            line-height: 36px;
            font-weight: 600;
            color: #4A266E;
            margin-bottom: 20px;
        }

        /* Venue Areas Section */

        .areas-title {
            text-align: left;
            font-size: 22px;
            font-weight: 600;
            line-height: 32px;
            color: #4A266E;
            margin-bottom: 18px;
        }

        .areas-subtitle {
            text-align: left;
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
            color: #4A266E;
            margin-bottom: 20px;
        }


        .areas-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .area-button{
            font-size: 12px;
            font-weight: 400;
            line-height: 22.86px;
            border: 0.5px solid #333333;
            border-radius: 10px;
            padding: 9px 22px;
        }

        /* Testimonial Section */

        .testimonial-carousel {
            display: none;
        }

        .testimonial-carousel-mobile {
            display: block;
        }

        .testimonial-title {
            font-size: 20px;
            font-weight: 500;
            line-height: 100%;
            color: #333;
            margin-bottom: 14px;
        }

        .testimonial-subtitle {
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            line-height: 100%;
            color: #333;
            margin-bottom: 20px;
        }

        .testimonial-image {
            width: 327px;
            height: 175px;
        }

        .testimonial-quote-container {
            padding: 0px;
        }

        .testimonial-container {
            text-align: center;
        }

        .testimonial-quote {
            text-align: left;
            font-size: 14px;
            line-height: 22px;
            font-weight: 500;
            letter-spacing: 0%;
            color: #666666;
            margin: 0 12px 14px 12px;
        }

        .quote-mark-icon {
            width: 30px;
            height: 30px;
            background-color: #F04E58;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0;
        }

        .quote-mark-start {
            top: 6px;
            left: 4px;
        }
        
        .quote-mark-end {
            bottom: 0;
            right: 8px;
        }

        .blogHeading-city {
            text-align: center;
            font-size: 22px;
            font-weight: 600;
            line-height: 16px;
            color: #4A266E;
            margin-bottom: 13px;
        }
    
        .blogSubHeading-city {
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #4A266E;
        }

        .cities-section-heading{
            font-size: 20px;
        }
    }

    @media (max-width: 640px) {
        
        .benefits-section {
        padding: 48px 16px;
        }

        .benefits-title {
            font-size: 22px;
            font-weight: 600;
            line-height: 28px;
        }

        .benefit-card-title {
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .benefit-description {
            color: #333333;
            font-size: 12px;
            line-height: 20px;
            font-weight: 400;
        }
    }
    
    @media (max-width: 480px) {
        .section-heading {
            padding: 10px 16px 8px 16px;
        }
        .section-heading-container {
            margin: 0;

        }
    
        .section-title {
            font-size: 22px;

        }
    
        .section-subtitle {
            font-size: 14px;
        }
    }