/* Extra small devices (phones, 576px and down) */
/* No media query since this is the default styling */

/* Small devices (portrait tablets and large phones, 576px and up) */
@media (min-width: 576px) {
    /* Your CSS rules here */
}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {
    .blu-section {
        border-radius: 0px 0px 80px 80px;
        padding: 35px 20px;
    }

    .gift-set {
        top: -50px;
        right: -20px;
    }

    .decor-1 {
        top: -40px;
        right: 30px;
        width: 130px;
    }

    .placeholder-img {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 70%;
    }

    .herotwo {
        transform: rotate(180deg);
    }

    .decor-3 {
        position: absolute;
        right: 40px;
        top: 0;
        width: 90px;
    }

    .page-decor-set {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        width: 120px !important;
    }

    .decor-4 {
        width: 70px !important;
    }

    .nostretch-parent {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nostretch {
        max-width: 1300px;
    }

    .product-card-2 {
        flex: none;
        border: 1.4px solid black;
        background: white;
        padding: 0px 0px 10px 0px;
        max-width: 270px;
        position: relative;
    }

    .product-card-2 img {
        height: 170px;
        width: 100%;
        object-fit: cover;
        border-bottom: 1.4px solid black;
    }

    .tool-tip:hover::after {
        opacity: 1;
        left: -100px;
    }
}

@media (min-width: 992px) {
    .blu-section {
        border-radius: 0px 0px 80px 80px;
        padding: 35px 20px;
    }

    .gift-set {
        top: -50px;
        right: -20px;
    }

    .decor-1 {
        top: -40px;
        right: 30px;
        width: 130px;
    }

    .placeholder-img {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 70%;
    }

    .herotwo {
        transform: rotate(180deg);
    }

    .decor-3 {
        position: absolute;
        right: 40px;
        top: 0;
        width: 90px;
    }

    .page-decor-set {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        width: 120px !important;
    }

    .decor-4 {
        width: 70px !important;
    }

    .nostretch-parent {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nostretch {
        max-width: 1300px;
    }
}

@media (min-width: 1200px) {
    .blu-section {
        border-radius: 0px 0px 80px 80px;
        padding: 35px 20px;
    }

    .gift-set {
        top: -50px;
        right: -20px;
    }

    .decor-1 {
        top: -40px;
        right: 30px;
        width: 130px;
    }

    .placeholder-img {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 70%;
    }

    .herotwo {
        transform: rotate(180deg);
    }

    .decor-3 {
        position: absolute;
        right: 40px;
        top: 0;
        width: 90px;
    }

    .page-decor-set {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        width: 120px !important;
    }

    .decor-4 {
        width: 70px !important;
    }

    .nostretch-parent {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nostretch {
        max-width: 1300px;
    }
}