.deal-container {
    position: relative;
    top: -15px;
    background-color: white;
}

.deal-div {
    background-color: #BFBFBF;
}

.brand-coupon-card {
    border-radius: 15px;
    box-shadow: rgba(100, 100, 111, 0.2) 0 5px 15px 4px;
    border: 0;
    cursor:pointer;
    position: relative ;
}

.brand-coupon-card:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.coupon-nav-buttons {
    position: absolute;
    right: 5px;
    bottom: 0;
}

.brand-coupon-logo-img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem; /* rounded-4 equivalent */
}

.deal-card-deal-tag-img {
    position: absolute;
    top: 15px;
    right: 0;
    z-index: 10;
    max-width: 60px;
}

@media screen and (min-width: 579px) and (max-width: 769px) {
    .deal-card-deal-tag-img {
        max-width: 70px;
        top: 15px;
        right: 0;
    }
}

@media screen and (min-width: 770px) {
    .deal-card-deal-tag-img {
        max-width: 80px;
        top: 15px;
        right: 0;
    }
}

/* Tablet and above styles */
@media (min-width: 768px) {
    .brand-coupon-logo-img {
        width: 100% ;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 1/1;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .coupon-nav-buttons {
        right: 5px;
    }
}

.coupon-card-coupon-tag-img {
    position: absolute;
    top:5%;
    right:2px;
    max-width: 100px;
}

.brand-deal-btn {
    color: #2439EA;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 3px 8px;
    border-radius: 5px;
    font-size:1.2em;
    text-decoration: none;
}

.brand-deal-btn span {
    width:20px;
    height:20px;
    padding:0;
    margin:0;
}

.brand-deal-btn:hover {
    color: white;
    background-color: #2439EA;
    font-weight:800;
}

.brand-header-section {
    background-color: var(--brand-color);
}

.brand-coupons-back-btn {
    overflow: hidden;
    background-color: #2439EA;
    background: linear-gradient(to bottom, #2439EA 95%, white 95%);
    color: white;
    border-radius: 15px 15px 0 0;
    padding: 0;
}

@media (min-width: 992px) {
    .brand-header-section {
        background-color: white !important;
    }
}

@media (min-width: 768px) {
    .rounded-md-0 {
        border-radius: 0 !important;
    }
}

@media screen  and (max-width: 769px) {
    .brand-deal-btn {
        padding: 2px 4px;
        border-radius: 5px;
        font-size:0.8em;
    }

    .brand-deal-btn span {
        width:15px;
        height:15px;
    }
}