/*  
	https://www.lineinvestments.ae/
	offers.css
	Last modified - 26 Nov 2025
*/

:root {
    --shopping-carnival: #441f7c;
    --shopping-carnival-bg: #faf6ff;
    --black: #041d2c;
    --blue: #643ea1;
    --gap-10: 10px;
}

.shopping-carnival {
    background-color: var(--shopping-carnival-bg);
}

    .shopping-carnival .image--banner {
        background-color: var(--shopping-carnival);
        padding-block-start: 120px;
    }

    .shopping-carnival .mall-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        justify-items: center;
        align-items: start;
    }

.malls {
    padding-block-end: 7.5rem;
    padding-block-start: 5rem;
}

    .tmc h2,
    .mall-info figure h3,
    .malls h1 {
        font-size: 3.125rem;
        color: var(--shopping-carnival);
        padding-block-end: 1.75rem;
        text-align: center;
        font-weight: 800;
    }

    .tmc p,
    .malls p {
        color: var(--black);
        font-size: 1.37rem;
        text-align: center;
    }

.mall-list {
    padding-block-start: 5rem;
}

    .mall-list a {
        padding: 40px 20px;
        background: #fff;
        border-radius: 20px;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        transition: all ease-in-out 200ms;
    }

        .mall-list a:hover {
            filter: drop-shadow(0 0 0.25rem #ccc);
            transition: all ease-in-out 200ms;
        }

        .mall-info figcaption .info,
        .mall-list a .info {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .mall-list a h3 {
            margin-block-start: 35px;
            margin-block-end: 25px;
            color: var(--black);
            font-size: 1.37rem;
            font-weight: var(--fw-semibold);
            text-align:center;
            height:40px;
        }

.mall-info figcaption .info > span {
    order: 2;
}

.mall-info figcaption .info > span,
.mall-list a .info > span {
    color: #fff;
    background: #8558bf;
    padding: 3px 15px;
    border-radius: 40px;
    font-weight: 800;
    font-size: 14px;
}

.mall-info figcaption .info .location span,
.mall-list a .location span {
    color: var(--black);
}

.tmc-wrap {
    background: #fff;
    padding-block-start: 6.87rem;
    padding-block-end: 9.37rem;
}

.tmc > p {
    font-size: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/*--accordion --*/
.accordion {
    margin-block-start: 4.375rem;
}

.accordion__item {
    position: relative;
    border-bottom: 2px solid rgba(100, 62, 161, 0.3);
}

    .accordion__item.active-item {
        background: none;
    }

    .accordion__item .accordion__title {
        display: flex;
        transition: background-color 0.2s;
        cursor: pointer;
        padding-block: 24px;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-10);
        justify-content: space-between;
    }

        .accordion__item .accordion__title .accordion__title-text {
            font-size: 1.375rem;
            font-weight: 800;
            color: var(--black);
        }

        .accordion__item .accordion__title.accordion-active .accordion__title-text {
            color: var(--blue);
        }

        .accordion__item .accordion__title:hover {
            transition: all 0.5s ease-out;
        }

        .accordion__item .accordion__title .accordion__arrow::before {
            content: "+";
        }

        .accordion__item .accordion__title.accordion-active .accordion__arrow::before {
            content: "+";
            position: relative;
            top: -2px;
            rotate: 40deg;
        }

        .accordion__item .accordion__title .accordion__arrow {
            width: 30px;
            height: 30px;
            order: 2;
            font-size: 1.6em;
            border-radius: 100%;
            text-align: center;
            font-style: normal;
            line-height: 0.9;
            transition: all 0.5s ease-out;
            font-weight: normal;
        }

            .accordion__item .accordion__title .accordion__arrow.accordion__rotate {
                transform: rotate(40deg);
                top: 10px;
                right: 32px;
                transition: all 0.5s ease-out;
            }

    .accordion__item .accordion__content {
        margin-bottom: 2px;
        font-size: 16px;
        display: none;
        line-height: 1.6;
        padding-block-end: 20px;
        padding-block-start: 10px;
        padding-inline: 20px;
    }

        .accordion__item .accordion__content ul {
        }

            .accordion__item .accordion__content ul li {
                margin-block-start: 15px;
                margin-inline-start: 30px;
                list-style: disc;
            }

        .accordion__item .accordion__content p {
            font-size: 16px;
            text-align: start;
        }

        .accordion__item .accordion__content ul li:last-child {
            margin-block-end: 30px;
        }

.mall-info figure {
    display: flex;
    align-items: center;
    gap: 3.125rem;
    margin-block-start: 5rem;
    margin-block-end: 4.063rem;
}

.offer-list .list-wrap {
    margin-bottom: 6rem;
}

.offer-list {
    margin-bottom: 8.125rem;
}

    .list-wrap .item,
    .offer-list .head {
        display: grid;
        grid-template-columns: 25rem 1fr;
    }

        .list-wrap .item h4 {
            font-weight: 800;
            color: var(--blue);
        }

.list-wrap .item {
    font-size: 1.25rem;
    padding-block: 30px;
    border-bottom: 1px solid rgba(100, 62, 161, 0.3);
}

    .list-wrap .item .info {
        display: flex;
        gap: 15px;
        flex-direction: column;
    }

.shopping-btn {
    background: var(--blue);
    color: #fff;
    padding: 16px 30px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: var(--fw-semibold);
    display: flex;
    transition: all 0.5s ease-out;
    align-items: center;
    gap: 20px;
    position: relative;
}
    .shopping-btn:hover {
        background: var(--black);
        transition: all 0.5s ease-out;
    }

.offer-list .links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

    .offer-list .links i {
        width: 30px;
        height: 30px;
        display: flex;
        border: 1px solid;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 20px;
    }

    .offer-list .links .w-icon {
        padding-inline-end: 60px;
    }
.mall-info figure picture {
    padding: 40px;
    min-width: 300px;
    background: #fff;
    border-radius: 20px;
}

    .mall-info figure picture img {
        margin: 0 auto;
    }

.offer-list .head {
    border-bottom: 2px solid var(--blue);
}

    .offer-list .head h3 {
        font-size: 1.563rem;
        font-weight: 800;
        color: #3b2362;
        margin-bottom: 30px;
    }

@media (max-width: 1200px) {
    .shopping-carnival .mall-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .mall-list a {
        min-width: 270px;
    }
}

@media (max-width: 950px) {
    .shopping-carnival .mall-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .shopping-carnival .image--banner {
        padding-block-start: 85px;
    }

    .mall-info figure h3 {
        font-size: 2.125rem;
        text-align:start;
    }

    .list-wrap .item,
    .offer-list .head {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .shopping-carnival .mall-list {
        grid-template-columns: 1fr;
    }

    .malls {
        padding-block-end: 4.5rem;
        padding-block-start: 3rem;
    }

    .mall-info figure h3 {
        font-size: 25px;
        padding-block-end: 0.75rem;
    }

    .tmc h2,
    .malls h1 {
        font-size: 2.25rem;
    }

    .mall-list {
        padding-block-start: 3rem;
    }

    .tmc-wrap {
        padding-block-start: 4rem;
        padding-block-end: 5rem;
    }

    .accordion__item .accordion__title .accordion__title-text {
        font-size: 1.15rem;
    }

    .offer-list .list-wrap {
        margin-bottom: 4rem;
    }

    .mall-info figure {
        margin-block-start: 2rem;
    }

    .offer-list {
        margin-bottom: 4.125rem;
    }

        .list-wrap .item,
        .offer-list .head {
            grid-template-columns: 1fr;
            gap: 20px;
        }

            .offer-list .head h3:nth-child(2) {
                display: none;
            }

    .mall-info figure picture {
        padding: 10px;
        min-width: 150px;
        background: #fff;
        border-radius: 10px;
    }

    .mall-info figure {
        gap: 1.125rem;
    }

        .mall-info figure picture img {
            margin: 0 auto;
            width: 130px;
            height: auto;
        }

    .mall-info figcaption .info .location span,
    .mall-info figcaption .info > span {
        font-size: 12px;
    }
    .tmc p, .malls p,
    .tmc > p {
        font-size: 16px;
    }
    .accordion {
        margin-block-start: 2.375rem;
    }
    }



.swiper-button-next,
.swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 15px;
}

.swiper-button-prev, .swiper-button-next {
    background-color: #ffffff96;
    border-radius: 50px;
    background-position-x: 15px;
    background-position-y: 10px;
    cursor: pointer;
}

    .swiper-button-prev:hover, .swiper-button-next:hover {
        background-color: #fff
    }

.swiper-button-next {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 45px;
    height: 45px;
    z-index: 99;
}

.swiper-button-prev {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 45px;
    height: 45px;
    z-index: 99;
    rotate: 180deg;
}