header a {
    color:#fff
}
#links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 30px 0;
    gap: 10px
}
.m-dnone{
    color:#fff
}
.h-giftcard{
    font-weight:bold
}

.gift-banner {
    height: calc(100vh - 120px);
    background-image: url(/images/giftcard/giftImages/hero.jpg);
    background-size: cover;
    background-position: 50% 30%;
    padding-bottom: 60px;
    color: #fff;
}
  
    .gift-banner::before {
        position: absolute;
        left: 0;
        content: "";
        height: 50%;
        bottom: 0;
        width: 100%;
        display: block;
        background: linear-gradient(180deg, rgba(71, 61, 61, 0) 0%, #4b0082 120%);
    }
  
    .gift-banner .container {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-direction: column;
        height: 100%;
        line-height: 1.3;
        position: relative;
        z-index: 3;
    }
  
        .gift-banner .container h1, .gift-banner .container h3 {
            color: #fff;
            line-height: 1.3;
            padding-top: 10px;
            text-align:left
        }
        .container.full-con{
            max-width: 90%;
        }
.gr_2 {
    width: calc(20% - 8px )
}

.cls_2, .cls_3, .cls_4 {
    display: none
}

.loaded .cls_2, .loaded .cls_3, .loaded .cls_1, .loaded .cls_4 {
    display: block
}

.loaded #loadMore {
    display: none
}

.btn {
    padding: 1em
}

.pbl {
    padding-bottom: 80px
}

select {
    background-image: url(/images/arrow-b.svg);
    background-position: 95% center;
    background-repeat: no-repeat;
    background-size: 13px 7.5px;
}



.purp {
    background-color: #4b0082;
    color: #fff;
    text-align: center;
}

h2 {
    font-size: 30px;
        letter-spacing: 0;
}

.purp h2 {
    color: #fff;
    max-width: 640px;
    line-height: 1.3;
    margin: auto;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #fff
}

.purp p {
    color: #fff;
    max-width: 500px;
    margin: auto;
    margin-bottom: 30px;
}

.container {
    background: none;
    padding: 0;
    max-width: calc(100% - 30px);
    width: 1200px
}

.btn.bg-green {
    padding-left: 25px;
    padding-right: 25px;
    border: none
}

    .btn.bg-green:hover {
        background-color: #fff;
        color: #4b0082;
    }

.blue {
    color: #4b0082 !important
}

.a1 {
    display: block;
    width: 640px;
    margin: auto;
    max-width: 100%;
}

.btn.btn-white {
    background: #fff;
    color: #4b0082;
    min-width: 300px
}

    .btn.btn-white:hover {
        background: #4b0082;
        color: #fff
    }

.ptm {
    padding-top: 60px
}

.pbm {
    padding-bottom: 60px
}

.img {
    display: block;
    width: 100%
}

.a2 {
    display: block
}

.a3 {
    display: block;
    width: calc(33.33% - 15px)
}

    .a3 img {
        display: block;
        margin: 15px auto;
        max-width: 75%
    }

img.event {
    max-width: 65% !important
}

.a2 img {
    display: block;
    width: 340px;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto
}

.flex-r {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.icon {
    display: block;
    height: 100px;
    margin: auto;
    border: none !important;
}

.bg-w h2 {
    color: #4b0082;
    margin: 0 auto 40px auto;
    text-align: center
}

.bg-green {
    text-align: center;
    color: #fff
}

    .bg-green .container {
        width: 1380px;
    }

    .bg-green h2 {
        color: #fff
    }

    .bg-green h3 {
        color: #fff
    }

    .bg-green p {
        max-width: 285px;
        margin: auto;
        text-align: center;
    }

    .bg-green h3:after {
        content: '';
        display: block;
        margin: 15px auto;
        width: 120px;
        height: 1px;
        background: #fff
    }

.flex-c {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.w1000 {
    text-align: center;
    width: 1000px;
    max-width: calc(100% - 30px);
    margin: auto;
    padding: 60px 0;
    font-family: "Poppins Medium";
}

.title {
    width: 40%
}

.flex-f {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    text-align: left
}

.pt40 {
    padding-top: 40px
}

.selectHolder {
    text-align: left;
    height: 45px;
    width: 150px
}

    .selectHolder select {
        width: 100%;
        height: 100%
    }

.w150 {
    width: 150px
}

#form {
    text-align: left
}

input[type=number] {
    -moz-appearance: textfield !important;
}

.rounded {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background: #ece7f2 !important;
    font-family: "Poppins Medium";
    padding: 0 10px 0 30px !important;
    height: 45px;
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    outline: none !important;
    user-select: none;
    border-radius: 20px !important;
    width: 150px !important;
    position: relative;
    line-height: 1;
    font-size: 14px !important
}

    .rounded input {
        border: none !important;
        background: transparent;
        padding: 0 !important;
        line-height: 1 !important;
        outline: none !important;
        width: 150px !important;
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
    }

    .rounded:before {
        position: absolute;
        content: '$';
        top: 50%;
        transform: translateY(-50%);
        left: 15px;
        display: block
    }

#sum.rounded {
    background: #4b0082 !important;
    color: #fff !important
}


.pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(75,0,130,0.9);
    padding: 80px;
    height: 100vh;
    height: 100svh;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s
}

    .pop.active {
        opacity: 1;
        pointer-events: initial
    }

.inner {
    background: #fff;
    color: #4b0082;
    padding: 60px;
    height: 100%;
    overflow-y: scroll;
    line-height: 2;
}

    .inner h2 {
        color: #4b0082;
        margin-bottom: 30px
    }

    .inner p.hasi {
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px
    }



    .inner li {
        list-style: none;
        position: relative;
        padding-left: 30px
    }

        .inner li:before {
            position: absolute;
            left: 12px;
            top: 7px;
            width: 6px;
            height: 6px;
            background: currentColor;
            border-radius: 50%;
            content: '';
            display: block;
        }

    .inner p.hasi span {
        position: absolute;
        left: 5px;
        top: 0
    }

    .inner i, .inner a {
        text-decoration: underline
    }

a.seeall {
    min-width: 240px;
    color:#fff;
}

.terms {
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
}

.mob {
    display: none
}

.close {
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
}


    .close:before {
        transform: rotate(45deg)
    }

    .close:after {
        transform: rotate(-45deg)
    }

    .close:before, .close:after {
        content: "";
        position: absolute;
        height: 2px;
        width: 100%;
        top: 50%;
        left: 0;
        background: #fff;
        border-radius: 5px;
        margin-top: -6px
    }

@media screen and (max-width: 1000px) {
    #page-gift {
        padding-top: 60px
    }

    .gift-banner {
        height: calc(100vh - 60px);
    }

    h3 {
        font-size: 14px;
        clear: left;
    }

    .mbm {
        margin-bottom: 40px
    }

    .btn.btn-white {
        background: #fff;
        color: #4b0082;
        min-width: 312px;
        font-size: 12px;
    }

    #links {
        padding-left: 15px;
        padding-right: 15px;
    }

    .gr_2 {
        width: calc(50% - 7.5px)
    }

    .cls_1 {
        display: none
    }

    h2 {
        font-size: 25px;
        line-height: 1.4
    }

    .flex-c, .flex-r {
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
    }

    .a3 {
        width: 100%
    }

    .desk {
        display: none
    }

    .flex-f {
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ddd;
        font-size: 12px;
        gap: 5px
    }

    .title {
        width: 100%;
    }

    .rounded, .selectHolder {
        width: calc(33.33% - 10px) !important;
        font-size: 12px
    }



    .flex-f.pt40 {
        align-items: center;
        padding-top: 0
    }

    .a3 img {
        max-width: 60%;
    }

    .mob {
        display: flex !important;
        flex-wrap: nowrap;
        position: sticky;
        top: 60px
    }

    .pop {
        padding: 30px;
    }

    .inner {
        padding: 30px 15px
    }

    .pbm {
        padding-bottom: 50px;
    }

    .ptm {
        padding-top: 52px;
    }

    .gift-banner::before {
        opacity: 0.2;
        bottom: -50px;
        top: -50px;
        background: #4b0082;
        height: auto
    }
}