@font-face {
    font-family: "Satisfy";
    src: url("fonts/Satisfy-Regular.ttf");
}

@font-face {
    font-family: "Alex";
    src: url("fonts/AlexBrush-Regular.ttf");
}

@font-face {
    font-family: "Urbanist";
    src: url("fonts/Urbanist-Italic.ttf");
}

@font-face {
    font-family: "Vicky";
    src: url("fonts/Vicky-SemiBold.ttf");
}

@font-face {
    font-family: "Urbanist_Semibold";
    src: url("fonts/Urbanist-SemiBold.ttf");
}

@font-face {
    font-family: "Urbanist_Bold";
    src: url("fonts/Urbanist-Bold.ttf");
}

@font-face {
    font-family: "Urbanist_Medium";
    src: url("fonts/Urbanist-Medium.ttf");
}

.body{
    overflow: auto;
    background-color: #FFE2FC;
}

.carosul1 {
    background-image: url(resources/banner1.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;
    width: 100%;
}

.banner--txt {
    font-family: "Satisfy";
    color: #fff;
    font-size: 2.5em;
    text-align: center;
    margin-top: -80px;
    /* -----glass----- */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(20px);
}

.banner--txt--p {
    margin-top: 0px;
}

.arrow {
    background-image: url(resources/Arrow_left.png);
    height: 20px;
    background-repeat: no-repeat;
    /* background-size: cover; */
    margin-left: 60px;
    margin-top: -30px
}

.explore {
    background-color: #cccbcb7e;
    width: 77px;
    border-radius: 5px;
    height: 20px;
    /* margin-left: 282px; */
    margin-top: -57px;
    /* margin-left: 78.5%; */
    float: right;
}

.e--txt {
    font-family: "Urbanist";
    font-size: 1em;
    margin-left: 5px;
    cursor: pointer;
    margin-top: 0px;
    /* justify-content: center;
    align-items: center; */
}

.c--txt {
    width: 30%;
    font-family: "Alex";
    font-size: 1.8em;
    text-decoration: underline 5px #EE1ABF;
    /* border-bottom: 5px solid #EE1ABF; */
}

.sec--2 {
    width: 100%;
}

.c--types {
    margin-top: 0px;
    display: none;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.c--types--mobile01 {
    margin-top: 0px;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6%;
}

.c--types--mobile02 {
    margin-top: 3%;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6%;
}

.type--img1 {
    height: 50px;
    background-repeat: no-repeat;
    /* margin-left: 22px; */
    align-items: center;
    display: none;
}

.type--img2 {
    background-image: url(resources/Open_Magazine.png);
    height: 50px;
    background-repeat: no-repeat;
    margin-left: 22px;
    display: flex;
}

.type {
    width: 90px;
    margin-top: 0px;
    border-radius: 8px;
    background-color: #ff81e446;
    /* background-color: green; */
    cursor: pointer;
    /* margin-top: 20px; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -20px;
}

.type--mobile {
    width: 90px;
    margin-top: 0px;
    border-radius: 8px;
    background-color: #ff81e446;
    /* background-color: green; */
    cursor: pointer;
    /* margin-top: 20px; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -20px;
}

.type--txt1 {
    font-family: "Vicky";
    text-align: center;
    font-weight: bold;
}

.type--txt2 {
    font-family: "Vicky";
    text-align: center;
    font-weight: bold;
}

/* 
.type02 {
    display: flex;
    flex-direction: row;
} */

.type06 {
    float: right;
}

.no_offer{
    height: 30vh;
}

@media screen and (min-width: 100px) and (max-width: 300px) {

    .carosul1 {
        height: 100px;
    }

    .banner--txt {
        font-size: 2em;
        margin-top: -75px;
        /* width: 70%; */
        justify-content: center;
    }

    .type--img2 {
        margin-left: 15px;
    }

    .c--txt{
        font-size: 1.5em;
    }
    
    .explore {
        margin-top: -45px;
        width: 65px;
    }

    .e--txt {
        font-size: 0.8em;
        margin-top: 2px;
    }

    .arrow {
        height: 18px;
        margin-left: 50px;
        margin-top: -27px
    }

}



@media screen and (min-width: 700px) and (max-width: 950px) {

    .carosul1 {
        height: 150px;
    }

    .banner--txt {
        font-size: 4em;
        margin-top: -120px;
        /* width: 70%; */
        justify-content: center;
    }

}



@media screen and (min-width: 950px) {

    .carosul1 {
        height: 250px;
    }

    .banner--txt {
        font-size: 5.2em;
        margin-top: -188px;
        /* width: 60%; */
        justify-content: center;
    }

    .c--txt {
        width: 15%;
        font-size: 2.8em;
    }

    .sec--2 {
        width: 100%;
    }

    .categories {
        padding-top: 0.1%;
        width: 80%;
        /* align-items: center; */
        margin-left: 10%;
        justify-content: center;
        /* align-self: center; */
    }

    .explore {
        margin-top: -85px;
    }

    .c--types {
        display: flex;
        flex-direction: row;
        width: 80%;
        margin-left: 10%;
        margin-top: -25px;
        gap: 4%;
    }

    .c--types--mobile01 {
        display: none;
    }

    .c--types--mobile02 {
        display: none;
    }

    .type02 {
        margin-left: 0%;
    }

    .type--img1 {
        display: flex;
        /* justify-content: center; */
    }

    .type--img2 {
        display: none;
    }

    .no_offer{
        height: 50vh;
    }

}


@media screen and (min-width: 750px) {

    .c--txt {
        font-size: 2.8em;
    }

    .explore {
        margin-top: -85px;
    }

}

@media screen and (min-width: 540px) and (max-width: 720px) {

    .c--txt {
        width: 20%;
    }

}

@media screen and (min-width: 1024px) {

    .type--img1 {
        margin-left: 24.5%;
    }

}


/* --------------section_3--------------- */

.offer {
    padding-top: 0%;
    width: 96%;
    margin-left: 2%;
    justify-content: center;
    /* background-color: blue; */
}

.offer--txt {
    width: 50%;
    font-family: "Alex";
    font-size: 1.8em;
    text-decoration: underline 5px #EE1ABF;
    /* border-bottom: 5px solid #EE1ABF; */
}

.trending--categories--txt {
    width: 75%;
    font-family: "Alex";
    font-size: 1.8em;
    text-decoration: underline 5px #EE1ABF;
}

.see--more {
    background-color: #cccbcb7e;
    width: 90px;
    border-radius: 5px;
    height: 20px;
    /* margin-left: 282px; */
    margin-top: 5px;
    /* margin-left: 78.5%; */
    float: right;
}

.see--more1 {
    background-color: #cccbcb7e;
    width: 80px;
    border-radius: 5px;
    height: 20px;
    /* margin-left: 282px; */
    margin-top: 5px;
    /* margin-left: 78.5%; */
    float: right;
}

.see--more--txt {
    font-family: "Urbanist";
    font-size: 1em;
    margin-left: 5px;
    cursor: pointer;
    margin-top: 0px;
    color: #000;
    /* justify-content: center;
    align-items: center; */
}

.see--more--arrow {
    background-image: url(resources/Arrow_left.png);
    height: 20px;
    background-repeat: no-repeat;
    /* background-size: cover; */
    margin-left: 75px;
    margin-top: -15px
}

.see--more--arrow1 {
    background-image: url(resources/Arrow_left.png);
    height: 20px;
    background-repeat: no-repeat;
    /* background-size: cover; */
    margin-left: 65px;
    margin-top: -32px
}

.carosul2 {
    background-image: url(resources/banner1.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;
    width: 100%;
    margin-top: -20px;
}

.offer--banner--txt {
    font-family: "Satisfy";
    color: #ffffff;
    font-size: 2.5em;
    text-align: center;
    margin-top: -80px;
    /* -----glass----- */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(20px);
}

.offer--banner--txt--p {
    margin-top: 0px;
}

.offer--product {
    width: 100%;
    /* background-color: blue; */
    height: 250px;
}

@media screen and (min-width: 950px) {

    .offer {
        width: 90%;
        /* align-items: center; */
        margin-left: 5%;
        justify-content: center;
        /* align-self: center; */
    }

    .offer--txt {
        width: 75%;
        font-size: 2.8em;
    }

    .trending--categories--txt {
        width: 25%;
        font-size: 2.8em;
    }

    .carosul2 {
        height: 250px;
        margin-top: -35px;
    }

    .offer--banner--txt {
        font-size: 5.2em;
        margin-top: -188px;
        /* width: 60%; */
        justify-content: center;
    }

    .offer--product {
        width: 90%;
        margin-left: 5%;
    }

    .see--more {
        margin-top: 15px;
    }

    .see--more1 {
        margin-top: 15px;
    }

}

@media screen and (min-width: 750px) {

    .offer--txt {
        font-size: 2.8em;
    }

    .trending--categories--txt {
        font-size: 2.8em;
    }

    /* .see--more {
        margin-top: -85px;
    } */

}

@media screen and (min-width: 100px) and (max-width: 300px) {

    .carosul2 {
        height: 100px;
    }

    .offer--banner--txt {
        font-size: 2em;
        /* margin-top: -75px; */
        /* width: 70%; */
        justify-content: center;
    }

    .offer--txt {
        font-size: 1.5em;
    }

    .trending--categories--txt {
        font-size: 1.5em;
    }

    .see--more {
        margin-top: -48px;
        width: 80px;
    }

    .see--more1 {
        margin-top: -48px;
        width: 80px;
    }

    .see--more--txt {
        font-size: 0.85em;
        margin-top: 2px;
    }

    .see--more--arrow {
        height: 18px;
        margin-left: 66px;
        margin-top: -28px
    }

}

@media screen and (min-width: 700px) and (max-width: 950px) {

    .carosul2 {
        height: 150px;
    }

    .offer--banner--txt {
        font-size: 4em;
        margin-top: -120px;
        /* width: 70%; */
        justify-content: center;
    }

}


/* -------------card----------- */

.card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 5%;
    /* margin-top: -25px; */
    gap: 6%;
}

.card--1 {
    width: 40%;
    margin-top: 0px;
    border-radius: 5px;
    /* background-color: #ff81e446; */
    background-color: green;
    cursor: pointer;
    /* margin-top: 20px; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position-y: -20px; */
}

.card--img1 {
    background-image: url(resources/Open_Magazine.png);
    height: 50px;
    background-repeat: no-repeat;
    /* margin-left: 22px; */
    align-items: center;
    /* display: none; */
}

.two {
    flex-direction: row;
}


@media screen and (min-width: 950px) {

    .card {
        display: flex;
        flex-direction: row;
        width: 90%;
        margin-left: 5%;
        /* margin-top: -25px; */
        gap: 6%;
    }

    .card--1 {
        width: 10%;
        margin-top: 0px;
        border-radius: 5px;
        /* background-color: #ff81e446; */
        background-color: green;
        cursor: pointer;
        /* margin-top: 20px; */
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        /* background-position-y: -20px; */
    }

    .card--img1 {
        background-image: url(resources/Open_Magazine.png);
        height: 50px;
        background-repeat: no-repeat;
        /* margin-left: 22px; */
        align-items: center;
        /* display: none; */
    }

}



















/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --first-color: hsl(38, 92%, 58%);
    --first-color-light: hsl(38, 100%, 78%);
    --first-color-alt: hsl(32, 75%, 50%);
    --second-color: hsl(195, 75%, 52%);
    --dark-color: hsl(212, 40%, 12%);
    --white-color: hsl(212, 4%, 95%);
    --body-color: hsl(212, 42%, 15%);
    --container-color: hsl(212, 42%, 20%);

    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Bai Jamjuree", sans-serif;
    --h2-font-size: 1.25rem;
    --normal-font-size: 1rem;
}

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

a {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/*=============== CARD ===============*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

.card__container {
    padding-block: 0rem;
    max-width: 100%;
}

.card__content {
    margin-inline: 1.75rem;
    /* border-radius: 1.25rem; */
    overflow: hidden;
}

.card__article {
    width: 200px;
    border-radius: 0.6rem;
    overflow: hidden;
}

.card__image {
    position: relative;
    background-color: var(--first-color-light);
    padding-top: 1.5rem;
    margin-bottom: -.75rem;
}

.card--img {
    height: 150px;
    background-color: red;
    padding: 0px;
}

.card__data {
    background-color: #f8a4e693;
    /* background-color: red; */
    padding: 0.1rem 0rem;
    /* border-radius: 1rem; */
    text-align: center;
    position: relative;
    z-index: 10;
}

.card--txt {
    /* background-color: #FF81E3; */
    margin-top: 0%;
    font-family: "Urbanist-Medium";
}

.image01 {
    background-image: url(resources/image_01.png);
    margin-left: -20px;
}

.discount {
    background-color: red;
    width: 45px;
    height: 38px;
    color: #ffffff;
    float: right;
    border-radius: 0rem 0rem 0rem 0.6rem;
    font-family: "Urbanist_Semibold";
}

.discount--line02 {
    font-size: 0.6rem;
    flex-direction: column;
}

.card--txt--line01 {
    font-family: "Urbanist-Medium";
    float: left;
    margin-left: 3%;
    margin-top: -9%;
}

.card--txt--line02 {
    font-family: "Urbanist-Medium";
    float: left;
    margin-left: 3%;
    margin-top: -1.5%;
    /* background-color: green; */
}

.rate {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.status {
    margin-top: -11px;
    /* margin-left: 50px; */
    font-family: "Urbanist-SemiBold";
    font-size: 10px;
    background-color: #6b69699c;
    width: 30%;
    border-radius: 5px;
    float: right;
    margin-right: 45px;
}

.star {
    /* display: flex; */
    margin-top: 38px;
    width: 33%;
    flex-direction: column;
    margin-left: 4%;
    align-items: center;
    justify-content: center;
}

.stwo {
    margin-top: -11px;
    margin-left: 20%;
}

.sthree {
    margin-top: -11px;
    margin-left: 41%;
}

.sfour {
    margin-top: -11px;
    margin-left: 62%;
}

.end--img {
    margin-top: -11px;
}

.line--01 {
    flex-direction: column;
}

.star--img {
    background-image: url(resources/star.png);
    width: 11px;
    height: 11px;
    background-repeat: no-repeat;
    background-size: cover;
}

.card__description {
    font-weight: 500;
    margin-bottom: 1.75rem;
}

.empty {
    height: 5px;
}

.price {
    margin-top: 20px;
    background-color: rgba(253, 139, 228, 0.589);
    height: 30px;
    /* border-radius: 0rem 0rem 0.6rem 1rem; */
}

.price--txt {
    padding-top: 2rem;
    margin-top: 50px;
}

.price:hover::before {
    left: 15%;
    margin-top: 3.5%;
    position: absolute;
    content: "BUY NOW";
    background-color: #fd62dc;
    width: 70%;
    color: #fff;
    transition: ease-in-out;
}

.price:hover {
    background-color: #fd62dc;
}

/* Swiper class */
.swiper-button-prev:after,
.swiper-button-next:after {
    content: "";
}

.swiper-button-prev,
.swiper-button-next {
    width: initial;
    height: initial;
    font-size: 4rem;
    color: rgb(161, 161, 161);
    display: none;
}

.swiper-button-prev {
    left: 0;
}

.swiper-button-next {
    right: 0;
}

.swiper-pagination-bullet {
    background-color: hsl(212, 32%, 40%);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #FF81E3;
}

.in--stock {
    background-color: #00FF0A;
    font-size: 10px;
    font-family: "Urbanist-Bold";
    font-weight: bold;
    width: min-content;
    /* width: 38%; */
    margin-left: 3%;
    margin-top: -3.5%;
}

.out--stock {
    background-color: #ff0000a1;
    font-size: 10px;
    font-family: "Urbanist-Bold";
    font-weight: bold;
    width: min-content;
    /* width: 38%; */
    margin-left: 3%;
    margin-top: -3.5%;
}


.end--img {
    float: right;
}

.product--name {
    margin-top: 2%;
}

.productsDiv{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 2%;
    padding-bottom: 50px;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
    .card__data {
        padding: 0rem;
    }
}

/* For medium devices */
@media screen and (min-width: 768px) {
    .card__content {
        margin-inline: 3rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: block;
    }

    .in--stock {
        margin-left: 5.5%;
    }

}

/* For large devices */
@media screen and (min-width: 1120px) {
    .card__container {
        max-width: 100%;
    }

    .swiper-button-prev {
        left: -1rem;
    }

    .swiper-button-next {
        right: -1rem;
    }
}

@media screen and (min-width: 1280px) {
    .card__container {
        max-width: 90%;
    }
}


@media screen and (min-width: 768px) {
    .card__article {
        max-width: 150px;
    }

    .card--txt--line01 {
        margin-left: 5%;
    }

    .star {
        margin-top: 40px;
        margin-left: 5%;
    }
}

@media screen and (min-width: 1020px) {
    .star {
        margin-top: 100px;
    }
}

@media screen and (min-width: 540px) and (max-width: 950px) {

    .card--img {
        height: 175px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .card--txt--line01 {
        font-family: "Urbanist-Medium";
        margin-left: 5%;
        margin-top: -5%;
    }

    .card--txt--line02 {
        font-family: "Urbanist-Medium";
        float: left;
        margin-left: 5%;
    }

    .in--stock {
        margin-left: 5.5%;
    }

    .star {
        margin-left: 5.1%;
    }


    .status {
        margin-right: 60px;
    }
}

@media screen and (min-width: 950px) {

    .card__article{
        width: 150px;
    }

    .star {
        margin-top: 33px;
        margin-left: 5%;
    }

    .card--txt--line02 {
        float: left;
        margin-left: 5%;
    }

    .status {
        margin-right: 50px;
    }

}


@media screen and (min-width: 100px) and (max-width: 300px) {

    .card__article {
        margin-top: 20px;
    }

    .card--txt--line01 {
        margin-top: -6%;
    }

    .status {
        margin-right: 60px;
    }

}

@media screen and (min-width: 350px) and (max-width: 370px) {

    .card__container {
        width: 70%;
    }

    .status {
        margin-right: 55px;
    }

}

.type01{
    color: black;
}