/* =====================================================
   HELPERS
===================================================== */

.gradient-icon {
    background: linear-gradient(to right,
            #325998 0%,
            #45376c 50%,
            #584587 50%,
            #af3869 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.textDecoration,
.textDecoration:hover {
    text-decoration: none !important;
    color: #666666;
}

.textDecoration:hover {
    color: #af3869;
}


/* =====================================================
   FOOTER BASE
===================================================== */

.ra-footer {
    width: 100%;
    background: #f8f7fc;
    overflow: hidden;
    font-family: inherit;
    padding-top: 40px;
}

.ra-footer *,
.ra-footer *::before,
.ra-footer *::after {
    box-sizing: border-box;
}

.ra-footer-main {
    position: relative;
    width: 100%;
    background: #f8f7fc;
}


/* =====================================================
   LAYOUT  (desktop: brand | badges | curved box)
===================================================== */

.ra-footer-inner {
    width: 100%;
    max-width: 1331px;
    margin: 0 auto;
    padding: 0 24px 0 48px;

    display: grid;
    grid-template-columns: minmax(220px, 300px) 200px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
}


/* =====================================================
   BRAND
===================================================== */

.ra-footer-brand {
    padding-top: 10px;
    min-width: 0;
}

.ra-footer-logo {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    margin: 0 0 28px 0;
}

.ra-footer-description {
    max-width: 300px;
    margin: 0 0 40px 0;

    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    color: #4e4e4e;
}

.ra-footer-social-title {
    margin: 0 0 18px 0;

    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
    color: #111111;
}

.ra-footer-social-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.ra-footer-social {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    border-radius: 50%;
    background: linear-gradient(135deg, #4561b2 0%, #c4447d 100%);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    text-decoration: none;
    transition: transform .2s ease;
}

.ra-footer-social:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

.ra-footer-social svg {
    width: 18px;
    height: 18px;
}

.ra-footer-social-text {
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
    color: #ffffff;
}


/* =====================================================
   BADGES (GPTW + QR + GOOGLE REVIEW)
===================================================== */

.ra-footer-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-bottom: 30px;
}

.ra-footer-gptw {
    display: block;
    line-height: 0;
}

.ra-footer-gptw img {
    display: block;
    width: 72px;
    height: auto;
}

.ra-footer-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ra-footer-qr img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.ra-google-review {
    position: relative;

    width: 192px;
    height: 40px;
    margin-top: 18px;

    border: 1px solid #4561b2;
    border-radius: 4px;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}

.ra-google-review:hover {
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(69, 97, 178, .2);
}

.ra-google-stars {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);

    padding: 0 3px;
    background: #f8f7fc;

    color: #f2b632;
    font-size: 17px;
    line-height: 17px;
    letter-spacing: -1px;
    white-space: nowrap;
}

.ra-google-text {
    font-size: 11px;
    line-height: 14px;
    color: #111111;
    white-space: nowrap;
}

.ra-google-g {
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);

    padding: 0 5px;
    background: #f8f7fc;

    color: #4285f4;
    font-size: 17px;
    line-height: 18px;
    font-weight: 700;
}


/* =====================================================
   RIGHT (CURVED BOX)
===================================================== */

.ra-footer-right {
    position: relative;
    min-width: 0;
    padding: 56px 0 40px 56px;

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr);
    column-gap: 40px;
}

/* curve: top + left border, stretched to the right edge of the screen */
.ra-footer-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: -100vw;

    border-top: 1px solid #c33f7e;
    border-left: 1px solid #c33f7e;
    border-top-left-radius: 115px;

    pointer-events: none;
}

.ra-footer-column {
    position: relative;
    min-width: 0;
}

.ra-footer-heading {
    margin: 0 0 22px 0;

    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    color: #111111;
}

.ra-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ra-footer-list li {
    margin: 0 0 12px 0;

    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: #666666;
}


/* CONTACT */

.ra-contact-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.ra-contact-list li i {
    flex: 0 0 18px;
    width: 18px;
    font-size: 16px;
    text-align: center;
}

.ra-contact-list li a,
.ra-contact-list li span {
    min-width: 0;
    overflow-wrap: anywhere;
}


/* LEGAL */

.ra-legal {
    margin-top: 26px;
}

.ra-legal .ra-footer-heading {
    margin-bottom: 18px;
}

/* columns share rows (heading / list / bottom block) so Legal & Policy starts on the
   same line as Exclusive Offers; browsers without subgrid keep the stacked layout */
@media (min-width: 768px) {
    .ra-footer-right > .ra-footer-column {
        grid-row: span 3;
    }

    @supports (grid-template-rows: subgrid) {
        .ra-footer-right > .ra-footer-column:nth-child(-n + 2) {
            display: grid;
            grid-template-rows: subgrid;
            align-content: start;
        }
    }
}


/* EXCLUSIVE OFFERS */

.ra-exclusive {
    margin-top: 26px;
}

.ra-exclusive-title {
    margin: 0 0 14px 0;

    font-size: 15px;
    line-height: 21px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* inline so the icon stays right after "OFFERS" when the title wraps */
.ra-exclusive-title .gradient-icon {
    display: inline;
}

.ra-exclusive-title img {
    display: inline-block;
    height: 20px;
    width: auto;
    margin-left: 4px;
    vertical-align: -4px;
}

.ra-exclusive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ra-exclusive-list li {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 18px;
    color: #666666;
}

.ra-exclusive-list.has-scroll {
    max-height: 60px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.ra-exclusive-list.has-scroll::-webkit-scrollbar {
    width: 5px;
}

.ra-exclusive-list.has-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.ra-exclusive-list.has-scroll::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}


/* =====================================================
   RERA BAR
===================================================== */

.ra-rera-bar {
    width: 100%;
    min-height: 75px;

    background: linear-gradient(90deg, #3d5fae 0%, #5e4a96 50%, #b83d79 100%);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 20px;
}

.ra-rera-inner {
    width: 100%;
    max-width: 1400px;
    text-align: center;
}

.ra-rera-text {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ra-copyright {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
}


/* =====================================================
   LAPTOP  (1200 - 1399)
===================================================== */

@media (max-width: 1399px) {

    .ra-footer-inner {
        padding: 0 20px 0 32px;
        grid-template-columns: minmax(200px, 270px) 190px minmax(0, 1fr);
        column-gap: 24px;
    }

    .ra-footer-right {
        padding-left: 44px;
        column-gap: 28px;
    }

    .ra-footer-heading {
        font-size: 17px;
    }

    .ra-footer-list li,
    .ra-exclusive-list li {
        font-size: 14px;
    }
}


/* =====================================================
   TABLET + SMALL LAPTOP  (< 1200)
   brand + badges on top, curved box full width below
===================================================== */

@media (max-width: 1199px) {

    .ra-footer-inner {
        padding: 0 30px;
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 40px;
    }

    .ra-footer-description {
        max-width: 420px;
    }

    .ra-footer-badges {
        flex-direction: row;
        align-items: center;
        gap: 32px;
        padding-bottom: 0;
    }

    .ra-footer-gptw img {
        width: 80px;
    }

    .ra-footer-right {
        grid-column: 1 / -1;
        padding: 44px 0 36px 44px;
    }

    .ra-footer-right::before {
        border-top-left-radius: 70px;
        left: 0;
    }
}


/* =====================================================
   MOBILE LANDSCAPE / SMALL TABLET  (< 768)
===================================================== */

@media (max-width: 767px) {

    .ra-footer {
        padding-top: 30px;
    }

    .ra-footer-inner {
        padding: 0 20px;
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .ra-footer-description {
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 26px;
    }

    .ra-footer-badges {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 28px;
    }

    .ra-footer-right {
        /* one column: Contact, then Useful Links, then Resources */
        grid-template-columns: 1fr;
        row-gap: 32px;
        column-gap: 24px;
        padding: 36px 0 30px 28px;
    }

    .ra-footer-right::before {
        border-top-left-radius: 48px;
    }

    .ra-footer-heading {
        font-size: 17px;
        margin-bottom: 16px;
    }

    .ra-rera-bar {
        min-height: auto;
        padding: 12px 15px;
    }

    .ra-rera-text,
    .ra-copyright {
        font-size: 11px;
        line-height: 17px;
    }
}


/* =====================================================
   SMALL MOBILE  (< 480)
===================================================== */

@media (max-width: 479px) {

    .ra-footer-inner {
        padding: 0 16px;
    }

    .ra-footer-logo {
        width: 160px;
    }

    .ra-footer-badges {
        justify-content: center;
        gap: 24px;
    }

    .ra-footer-gptw img {
        width: 70px;
    }

    .ra-footer-right {
        padding: 30px 0 26px 20px;
        column-gap: 16px;
    }

    .ra-footer-right::before {
        border-top-left-radius: 36px;
    }

    .ra-footer-list li,
    .ra-exclusive-list li {
        font-size: 14px;
    }

    .ra-footer-social {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}


/* =====================================================
   VERY SMALL  (< 360)
===================================================== */

@media (max-width: 359px) {

    .ra-google-review {
        width: 176px;
    }

    .ra-google-text {
        font-size: 10px;
    }
}