/* -------------------------------------- */
/* ----------- IMPORTANT NOTES ---------- */
/* -------------------------------------- */

/* If max width set to parent, set percent width to child */
/* If min height set to parent, set vh to child           */

/* -------------------------------------- */
/* ------------- Utilities -------------- */
/* -------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* ------------ Typography ---------- */
    --ff-poppins-light: "Poppins", sans-serif;
    --ff-playfair-serif: "Playfair Display", serif;
    --ff-archivo: "Archivo", sans-serif;
    /* ------------- Colors ------------- */
    --clr-dirty-white: #f6f6f6;
    --clr-grey: #a6a6a6;
    --clr-dark-grey: #1e1e1e;
    --clr-pastel-red: #db583a;
    --clr-dark-blu: #0D406A;
    --clr-blue: #03253e;
    /* -------------- Sizes ------------- */
    --fs-8: .5rem;
    --fs-16: 1rem;
    --fs-24: 1.5rem;
    --fs-32: 2rem;
    --fs-40: 2.5rem;
    --fs-48: 3rem;
    --fs-56: 3.5rem;
    --fs-64: 4rem;
    --fs-72: 4.5rem;
    --fs-80: 5rem;
    --fs-88: 5.5rem;
    --fs-96: 6rem;
    --fs-104: 6.5rem;
    --fs-112: 7rem;
    --fs-120: 7.5rem;
    --fs-128: 8rem;
    --fs-136: 8.5rem;
    --fs-144: 9rem;
    --fs-152: 9.5rem;
    --fs-160: 10rem;
}

/* -------------------------------------- */
/* ----------- Utility Classes ---------- */
/* -------------------------------------- */

.text-poppins {
    font-family: var(--ff-poppins-light);
    font-weight: 400;
    color: var(--clr-dark-grey);
    white-space: nowrap;
    line-height: 1.5;
}

.flex-box-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-center {
    display: grid;
    place-items: center;
}

.font-titles {
    font-size: clamp(1rem, 2vw, 2rem);
}

.font-a {
    color: var(--clr-dirty-white);
    font-family: var(--ff-poppins-light);
    font-size: clamp(1rem, 1vw, 1.5rem);
    font-weight: 600;
    transition: ease-in-out 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.font-descriptions {
    font-size: clamp(.5rem, 1vw, 1rem);
}

.img-square-contain-center {
    width: 20vw;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: center;
}

.img-landscape-cover {
    width: 20vw;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
}


/**/
/* -------------------------------------- */
/* --------- Defautls and resets -------- */
/* -------------------------------------- */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    max-width: 100vw !important;
    position: relative;
    min-height: 100%;
    height: 100%; /* input min and height in html so footer doesn't  break */
    font-size: var(--fs-16);
    box-sizing: border-box;
    scroll-behavior: smooth !important;
}

body, p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

body {
    margin-bottom: 60px;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

/* -------------------------------------- */
/* ---------------- Header -------------- */
/* -------------------------------------- */

/* input height to respect fixed top and spacing of main */
header {
    min-height: 10vh;
    max-width: 100vw;
}

    header .img-container {
        width: clamp(5rem, 8vw, 8rem);
        /*margin-inline: var(--fs-16);*/
    }

nav.navbar {
    padding: 0.5rem 1rem !important;
    min-height: 10vh;
}

header .nav-link {
    color: var(--clr-dark-grey);
    font-family: var(--ff-poppins-light);
    font-size: clamp(1rem, 1vw, 1rem) !important;
    font-weight: 500;
    border: 1px solid transparent;
    transition: 0.3s ease-in-out;
}


    header .nav-link:hover {
        color: var(--clr-pastel-red) !important;
        border-bottom: 1px solid var(--clr-pastel-red);
        transition: 0.3s ease-in-out;
    }

/* ------------- Search Bar -------------* */
.nav-search-container {
    width: 50%;
}

.nav-search-bar {
    background-color: var(--clr-dirty-white);
    width: 100%;
    padding: var(--fs-8) var(--fs-24);
    border-radius: var(--fs-8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--fs-8);
}

    .nav-search-bar input {
        width: 80%;
        background: none;
        outline: none;
        border: none;
        font-size: clamp(.5rem, 1vw, 1rem);
        font-family: var(--ff-poppins-light);
    }

    .nav-search-bar svg {
        fill: var(--clr-grey);
        width: var(--fs-16);
    }
/* ----------------- End ---------------- */

/* ----------- Account / Cart ----------- */
.nav-account-cart {
    width: 20%;
    display: flex;
    justify-content: end;
    gap: var(--fs-16);
    /*padding-block: var(--fs-8);*/
}

.nav-item {
    list-style: none;
}

.nav-account-cart .flex-container {
    display: flex;
    gap: var(--fs-8);
    align-items: center;
    padding: var(--fs-8);
}

.nav-account-cart .cart {
    position: relative;
}

.nav-account-cart .flex-container span {
    position: absolute;
    top: 0;
    right: 0;
}

.nav-account-cart .flex-container svg {
    fill: var(--clr-grey);
    width: clamp(.5rem, 1vw, 1rem);
}

.nav-account-cart .flex-container a {
    text-decoration: none;
    color: var(--clr-dark-grey);
    font-family: var(--ff-poppins-light);
    font-size: clamp(1rem, 1vw, 1rem);
    font-weight: 500;
}

    .nav-account-cart .flex-container a:hover {
        color: var(--clr-pastel-red);
    }

/* ----------------- End ---------------- */

/* -------------------------------------- */
/* ------ Start of implementation ------- */
/* -------------------------------------- */

/* --------- Set layout of html ----------*/

main {
    /*margin: 1rem;*/
    min-height: 100vh;
    margin: 0 auto;
    width: 100%;
}

#particles-js {
    margin: 0 !important;
    z-index: 2 !important;
    width: 100%;
    height: 100%;
}

canvas {
    padding: 0 !important;
    max-width: 100vw;
    z-index: -1 !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    /*position: fixed;*/
    /*filter: blur(3px);*/
}

.index-main {
    width: 100%;
    min-height: 100vh !important;
    position: relative;
    gap: var(--fs-104);
}

.ad-container-description {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: var(--fs-16);
    font-family: var(--ff-poppins-light);
}

    .ad-container-description h1 {
        font-size: clamp(2rem, 5vw, 4rem);
        font-weight: 800;
        color: var(--clr-dark-grey);
        font-family: var(--ff-poppins-light);
    }

    .ad-container-description .ad-container-buttons {
        display: flex;
        gap: var(--fs-16);
    }

        .ad-container-description .ad-container-buttons a {
            font-size: clamp(.5rem, 1.5vw, 1rem);
            outline: 0;
            border: none;
            width: 35%;
            padding: var(--fs-16);
            border-radius: var(--fs-8);
            transition: ease-in-out 0.2s;
            text-align: center;
        }

        .ad-container-description .ad-container-buttons button:hover {
            transform: scale(1.05);
            transition: ease-in-out 0.2s;
        }

        .ad-container-description .ad-container-buttons .buy-now {
            background-color: var(--clr-pastel-red);
            color: var(--clr-dirty-white);
        }

        .ad-container-description .ad-container-buttons .add-cart {
            background-color: var(--clr-dark-grey);
            color: var(--clr-dirty-white);
        }

.ad-container-images {
    width: 100%;
    background-color: white;
    height: 50vh;
    border-radius: 1rem;
    display: flex;
    align-items: center;
}

    .ad-container-images .swiper-container-3 {
        width: 100%;
        height: 80%;
    }

    .ad-container-images .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .ad-container-images .swiper-slide img {
            width: 90%;
            height: 100%;
            max-width: 500px;
            aspect-ratio: 1/1;
            object-fit: contain;
            object-position: center;
        }


/* -------------------------------------- */
/* -------------- Quote Banner ---------- */
/* -------------------------------------- */
.banner {
    width: 100%;
    min-height: 30vh;
    display: grid;
    place-items: center;
    background-image: url("../asset/pexels-fauxels-3184418.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

    .banner::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        filter: blur(3px);
        transition: 0.3s ease-in-out;
    }

    .banner .quote-container {
        position: relative;
        padding: 2rem;
    }

        .banner .quote-container h1 {
            font-size: clamp(2rem, 3vw, 5rem);
            color: var(--clr-dirty-white);
            font-family: var(--ff-poppins-light);
            position: relative;
            z-index: 1;
        }

    .banner:hover::after {
        filter: none;
        transition: 0.3s ease-in-out;
    }


/* -------------------------------------- */
/* -------------- Quote Banner 2 ---------- */
/* -------------------------------------- */
.banner-two {
    position: relative;
    width: 100%;
    min-height: 30vh;
    display: grid;
    place-items: center;
    background-image: url("../asset/pexels-jcosta-13658501.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

    .banner-two::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        filter: blur(3px);
        transition: 0.3s ease-in-out;
    }

    .banner-two .quote-container {
        position: relative;
        padding: 2rem;
    }

        .banner-two .quote-container h1 {
            font-size: clamp(2rem, 3vw, 5rem);
            color: var(--clr-dirty-white);
            font-family: var(--ff-poppins-light);
            position: relative;
            z-index: 1;
        }

    .banner-two:hover::after {
        filter: none;
        transition: 0.3s ease-in-out
    }

/* -------------------------------------- */
/* ----------- Reseller Cards ----------- */
/* -------------------------------------- */

.reseller-section {
    margin: 2rem auto;
    width: 100%;
}

    .reseller-section .section-div {
        text-align: center;
        margin-bottom: 1rem;
    }

        .reseller-section .section-div a {
            font-size: clamp(1rem, 2vw, 2rem);
            color: var(--clr-dark-grey);
            font-family: var(--ff-poppins-light);
            font-weight: 600;
            transition: 0.3s ease-in-out;
        }

            .reseller-section .section-div a:hover {
                color: var(--clr-pastel-red);
                transition: 0.3s ease-in-out;
            }

    .reseller-section .reseller-cards {
        margin-top: 3rem;
        width: 100%;
    }

        .reseller-section .reseller-cards .card-content {
            margin: 1rem;
            display: flex;
            justify-content: center;
            height: 200px;
            border-radius: 1rem;
            cursor: pointer;
            align-items: center;
            gap: var(--fs-24);
            position: relative;
        }

            .reseller-section .reseller-cards .card-content .card-days {
                color: var(--clr-dirty-white);
                font-size: var(--fs-80);
                font-weight: 600;
                padding: 0;
                margin: 0;
                font-family: var(--ff-poppins-light);
            }

            .reseller-section .reseller-cards .card-content .card-group {
                display: flex;
                flex-direction: column;
            }

                .reseller-section .reseller-cards .card-content .card-group .card-total,
                .reseller-section .reseller-cards .card-content .card-group .card-expiring {
                    padding: 0;
                    margin: 0;
                    color: var(--clr-dirty-white);
                    font-family: var(--ff-poppins-light);
                }

                .reseller-section .reseller-cards .card-content .card-group .card-total {
                    letter-spacing: 3px;
                    font-weight: 600;
                }


            .reseller-section .reseller-cards .card-content .card-button {
                position: absolute;
                bottom: 5%;
                left: 20%;
                color: var(--clr-dirty-white);
                font-size: var(--fs-16);
                font-family: var(--ff-poppins-light);
                transition: 0.3s ease-in-out;
            }

                .reseller-section .reseller-cards .card-content .card-button:hover {
                    transform: scale(1.05);
                    transition: 0.3s ease-in-out;
                }

        .reseller-section .reseller-cards .reseller-image-1 {
            background-image: url("../asset/wave-haikei.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom;
            transition: 0.3s ease-in-out;
        }

            .reseller-section .reseller-cards .reseller-image-1:hover {
                transform: scale(1.05);
                transition: 0.3s ease-in-out;
            }

        .reseller-section .reseller-cards .reseller-image-2 {
            background-image: url("../asset/wave-haikei (3).png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom;
            transition: 0.3s ease-in-out;
        }

            .reseller-section .reseller-cards .reseller-image-2:hover {
                transform: scale(1.05);
                transition: 0.3s ease-in-out;
            }

        .reseller-section .reseller-cards .reseller-image-3 {
            background-image: url("../asset/wave-haikei (4).png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom;
            transition: 0.3s ease-in-out;
        }

            .reseller-section .reseller-cards .reseller-image-3:hover {
                transform: scale(1.05);
                transition: 0.3s ease-in-out;
            }

/* -------------------------------------- */
/* --- Swiper JS / Popular Categories --- */
/* -------------------------------------- */
.popular-categories {
    padding-inline: 1rem;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .popular-categories .section-slide {
        padding-block: 1rem;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

        .popular-categories .section-slide .title {
        }

            .popular-categories .section-slide .title h1 {
                font-family: var(--ff-poppins-light);
                font-size: clamp(1rem, 2vw, 2rem);
                font-weight: 600;
                color: var(--clr-dark-grey);
                margin: 0;
            }

            .popular-categories .section-slide .title a {
                color: var(--clr-dark-grey);
                font-family: var(--ff-poppins-light);
                font-size: clamp(0.8rem, 1vw, 1.5rem);
                font-weight: 600;
                transition: ease-in-out 0.2s;
                cursor: pointer;
                text-decoration: none;
            }

                .popular-categories .section-slide .title a:hover {
                    /*color: var(--clr-pastel-red);*/
                    transform: scale(1.02);
                    transition: ease-in-out 0.2s;
                }

    .popular-categories .swiper {
        margin-top: var(--fs-32);
        /*max-width: 100vw !important;*/
        /*width: 100% !important;*/ /* Change if completed */
        width: 80vw !important;
        display: flex;
        justify-content: center;
    }

    .popular-categories .swiper-wrapper {
        margin-bottom: 3rem;
        /*        display: flex;
        justify-content: center;
        align-items: center;*/
    }

    /* ---- Cards Popular Categories part ----*/

    .popular-categories .swiper .swiper-slide {
        /*text-decoration: none;*/
        transition: ease-in-out 0.3s;
        display: flex;
        justify-content: center;
        padding: var(--fs-8);
    }

        .popular-categories .swiper .swiper-slide:hover {
            transition: ease-in-out 0.3s;
        }

    .popular-categories .cards {
        border-radius: var(--fs-8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        /*width: 400px;*/
        max-width: 350px;
        box-shadow: 2px 1px 22px 5px rgba(204, 204, 204, 0.5);
        /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);*/
        /*background-color: var(--clr-dirty-white);*/
        background-image: url("../asset/circle-scatter-haikei.png");
        background-repeat: no-repeat;
        background-size: contain;
    }

        .popular-categories .cards .card-header {
            width: 15vw;
            height: 25vh;
            /*width: 10rem;*/
            /*height: 150px;*/
            /*aspect-ratio: 16/9;*/
            background: none;
            border: none;
        }

            .popular-categories .cards .card-header img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                aspect-ratio: 1/1;
            }

        .popular-categories .cards .card-body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: var(--fs-24);
            /*background-color: var(--clr-dark-grey);*/
            background-image: url("../asset/blob-scene-haikei.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            color: var(--clr-dirty-white);
            border-radius: var(--fs-8);
            padding: var(--fs-24);
        }

        .popular-categories .cards .card-body-container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            gap: var(--fs-16);
            max-height: 100px;
            min-height: 100px;
        }

            .popular-categories .cards .card-body-container .product-title {
                font-size: clamp(.5rem, 1.5vw, 1rem);
                font-family: var(--ff-poppins-light);
            }

            .popular-categories .cards .card-body-container .product-description {
                font-size: clamp(.5rem, 1vw, 1rem);
                font-family: var(--ff-poppins-light);
                overflow: hidden;
                text-overflow: ellipsis;
            }

        .popular-categories .cards .swiper-card-footer {
            border: none;
            padding: 0;
        }

            .popular-categories .cards .swiper-card-footer a {
                border: 1px solid var(--clr-dirty-white);
                background-color: var(--clr-dark-grey);
                outline: none;
                color: var(--clr-dirty-white);
                padding: var(--fs-8) var(--fs-16);
                border-radius: var(--fs-8);
                transition: ease-in-out 0.2s;
                font-size: clamp(.5rem, 1vw, .8rem);
                font-family: var(--ff-poppins-light);
            }

            .popular-categories .cards .swiper-card-footer button:hover {
                background-color: var(--clr-dirty-white);
                border: 1px solid var(--clr-dirty-white);
                transition: ease-in-out 0.2s;
                color: var(--clr-dark-grey);
            }

    .popular-categories .view-all {
        margin: var(--fs-16);
    }

        .popular-categories .view-all a {
            /*background-color: var(--clr-dark-blu);*/
            background-color: transparent;
            border: 1px solid var(--clr-dark-blu);
            font-family: var(--ff-poppins-light);
            font-weight: 400;
            font-size: clamp(0.5rem, 1vw, 1rem);
            color: var(--clr-dark-blu);
            padding: 1rem 2rem;
            border-radius: var(--fs-24);
            transition: ease-in-out 0.3s;
        }

            .popular-categories .view-all a:hover {
                transition: ease-in-out 0.3s;
                /*background-color: var(--clr-dark-blu);*/
                transform: scale(1.02);
            }

/* -------------------------------------- */
/* -------------- Shop Section ---------- */
/* -------------------------------------- */



/*.shop-svg {
    max-width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    background-color: #0D406A;
    background-image: linear-gradient(to bottom, rgba(13, 64, 106, 0.86), #0D406A);
    z-index: -1;
}*/

.shop {
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .shop .shop-nav {
        /*background-color: lightblue;*/
        display: flex;
        align-items: center;
        padding: 1rem;
        max-width: 1500px;
        width: 100%;
        margin-top: var(--fs-40);
    }

        .shop .shop-nav .swiper-container-4 {
            /*max-width: 100vw !important;*/
            /*width: 100% !important;*/ /* Change if completed */
            width: 80vw !important;
            display: grid;
            place-items: center;
        }

        .shop .shop-nav .swiper-wrapper {
            display: flex;
            justify-content: center;
        }

        .shop .shop-nav .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .shop .shop-nav .swiper-slide a {
                /*border: 1px solid var(--clr-dark-grey);*/
                /*background-color: var(--clr-blue);*/
                padding: var(--fs-16) var(--fs-16);
                /*border-radius: var(--fs-8);*/
                color: var(--clr-dark-grey);
                text-transform: capitalize;
                font-family: var(--ff-archivo);
                font-size: clamp(1rem, 1.5vw, 1.5rem);
                font-weight: 300;
                border: 1px solid transparent;
                transition: 0.3s ease-in-out;
            }

                .shop .shop-nav .swiper-slide a:hover {
                    /*background-color: var(--clr-blue);
            color: var(--clr-dirty-white)*/
                    border-bottom: 1px solid var(--clr-pastel-red);
                    transition: 0.3s ease-in-out;
                    color: var(--clr-pastel-red);
                }

    .shop .cards-container {
        max-width: 1500px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 3rem 2rem;
        gap: var(--fs-32);
    }

    .shop .shop-title {
        font-size: clamp(1.5rem, 2vw, 3rem);
        color: var(--clr-dirty-white);
        font-family: var(--ff-poppins-light);
    }

    /*.shop .cards-grid {*/
    /* display: grid;
        grid-template-columns: repeat(3, 1fr);
        place-items: center;*/
    /*gap: var(--fs-32);
        max-width: 100%;
    }*/

    .shop .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--fs-16);
        grid-template-areas:
            "zero zero zero"
            "one two two"
            "three three four"
            "five six four";
    }

.template-zero {
    grid-area: zero;
}

.template-one {
    grid-area: one;
}

.template-two {
    grid-area: two;
}

.template-three {
    grid-area: three;
}

.template-four {
    grid-area: four;
}

.template-five {
    grid-area: five;
}

.template-six {
    grid-area: six;
}

.shop .cards-content {
    display: flex;
    flex-direction: column;
    /*width: 300px;
    height: auto;*/
    width: 100%;
    height: 100%;
    /*aspect-ratio: 1/1;*/
    padding: 0;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

    .shop .cards-content:hover {
        /*transform: scale(1.03);*/
        filter: blur(2px);
        transition: 0.3s ease-in-out;
    }

    .shop .cards-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.shop .title {
    /*    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;*/
}

    .shop .title h1 {
        font-size: 1rem;
        color: var(--clr-dirty-white);
    }

    .shop .title p {
        font-size: 1rem;
        color: var(--clr-dirty-white)
    }

/* -------------------------------------- */
/* ----------- Article Section ---------- */
/* -------------------------------------- */

/*.articles {
    max-width: 100vw;
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    background-image: url("../asset/bg-11.png");
    background-position: center;
    background-attachment: fixed;
}

    .articles .section-slide {
        width: 100%;
        height: 100%;
        gap: var(--fs-32);
        margin: 0;
        padding: 1rem;
        overflow: hidden;
    }

        .articles .section-slide .title {
            font-size: var(--fs-64);
            font-family: var(--ff-poppins-light);
        }

        .articles .section-slide .description {
            text-align: justify;
            line-height: 2;
            font-size: var(--fs-16);
            font-family: var(--ff-poppins-light);
        }


    .articles .article-text, .articles .article-img {
        margin: 0;
        padding: 1rem;
    }

    .articles .article-img {*/
/*background-color: lightblue;*/
/*}

    .articles img {
        width: 50%;
        height: 50%;
        aspect-ratio: 1/1;
        object-fit: cover;
        object-position: center;
        animation: animateBlob 5s ease-in-out infinite;
        transition: all 1s ease-in-out;
    }*/

/*    .articles .bg {
        position: absolute;
        z-index: -1;
    }

    .articles img {
        width: 100%;
        height: 100vh;
        filter: blur(15px);
    }*/



/* ----------------------------------------------*/
/* ------------ Cards top brands part -----------*/
/* ----------------------------------------------*/

.top-products {
    padding: 2rem;
    max-width: 100vw !important;
    margin: 0 auto;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    /*    background-image: url("../asset/bg-11.png");
    background-attachment: fixed;
    background-position: center;*/
}

    .top-products .swiper-container-2 {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .top-products .section-slide {
        position: relative;
        padding-inline: 4rem;
    }

    .top-products .title h1 {
        padding-bottom: var(--fs-16);
        font-family: var(--ff-poppins-light);
        font-size: clamp(1rem, 2vw, 2rem);
        font-weight: 600;
        color: var(--clr);
    }

    .top-products .swiper-wrapper {
        /*  display: flex;
        justify-content: center;
        align-items: center;*/
        margin-inline: 3rem;
    }

    .top-products .swiper-custom-nav {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        /*z-index: 1;*/
    }

    .top-products .swiper-custom-next,
    .top-products .swiper-custom-prev {
        padding: 1rem;
        background-color: var(--clr-dirty-white);
        border-radius: 50%;
        transition: ease-in-out 0.3s;
    }



    .top-products .cards {
        display: grid;
        place-items: center;
        background: none;
        border: none;
        min-width: 10vw;
        margin: 1rem;
    }

        .top-products .cards img {
            width: 100%;
            height: auto;
            aspect-ratio: 1/1;
            object-fit: contain;
            object-position: center;
        }


/* -------------------------------------- */
/* --------------- Footer --------------- */
/* -------------------------------------- */
footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: 100vw !important;
    background-color: var(--clr-dark-blu);
}

    footer .invitation {
        width: 100%;
        padding: 1rem;
        min-height: 30vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    footer .footer-container {
        width: 100%;
        background-color: var(--clr-blue);
    }

        footer .footer-container > div {
            padding: 0;
            min-height: 30vh;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        footer .footer-container .sm-container > h1,
        footer .footer-container .branches > h1,
        footer .footer-container .other > h1 {
            padding: 1rem;
            margin: 0;
            color: var(--clr-dirty-white);
            font-family: var(--ff-poppins-light);
        }

        footer .footer-container .sm-container h1 {
            font-size: 1.5rem;
        }

        footer .footer-container .sm {
            width: 80%;
            display: flex;
            justify-content: space-evenly;
            padding: 1rem;
        }

        footer .footer-container .other img {
            width: 10vw;
            height: auto
        }

        footer .footer-container .other .sm h1 {
            font-size: 1rem;
            color: var(--clr-dirty-white);
        }

        footer .footer-container .sm img {
            width: 3rem;
            height: auto;
        }


        footer .footer-container .branches p {
            font-size: 1rem;
            color: var(--clr-dirty-white);
        }

    footer .invitation h1 {
        margin: var(--fs-16);
        color: var(--clr-dirty-white);
        font-family: var(--ff-poppins-light);
        font-size: clamp(1.5rem, 2vw, 3rem)
    }

    footer .invitation button {
        margin: var(--fs-16);
        padding: var(--fs-16) var(--fs-40);
        background: transparent;
        border: 1px solid var(--clr-dirty-white);
        color: var(--clr-dirty-white);
        border-radius: var(--fs-32);
        transition: 0.2s ease-in-out;
        font-family: var(--ff-poppins-light);
        font-size: clamp(1rem, 1vw, 1rem)
    }

        footer .invitation button:hover {
            background-color: var(--clr-pastel-red);
            transition: 0.2s ease-in-out;
        }

    footer .copyright {
        padding: 1rem;
        margin: 1rem;
        color: white;
        font-size: 1rem;
        font-family: var(--ff-poppins-light);
        width: 100%;
    }

    footer a {
        padding: 0;
        margin: 0;
    }

/* -------------------------------------- */
/* ------- Terms And Condition CSS ------ */
/* -------------------------------------- */

.tnc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .tnc .tnc-banner {
        height: 30vh;
        width: 100%;
        background-image: url('../asset/termsandcondition2.jpeg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        display: grid;
        place-items: center;
    }

        .tnc .tnc-banner::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            filter: blur(3px);
            transition: 0.3s ease-in-out;
        }

        .tnc .tnc-banner .quote-container {
            position: relative;
            padding: 2rem;
        }

            .tnc .tnc-banner .quote-container h1 {
                font-size: clamp(2rem, 3vw, 5rem);
                color: var(--clr-dirty-white);
                font-family: var(--ff-poppins-light);
                position: relative;
                z-index: 1;
            }

        .tnc .tnc-banner:hover::after {
            filter: none;
            transition: 0.3s ease-in-out;
        }

    .tnc .tnc-container {
        max-width: 1000px;
        padding: 2rem;
        padding-bottom: 15vh;
    }

        .tnc .tnc-container p {
            text-align: justify;
            font-family: var(--ff-poppins-light);
            font-size: 1rem;
        }

        .tnc .tnc-container span {
            font-weight: 600;
        }

        .tnc .tnc-container .tnc-intro {
        }

            .tnc .tnc-container .tnc-intro .one {
            }

            .tnc .tnc-container .tnc-intro .two {
                font-weight: 600;
                color: var(--clr-dark-blu);
            }

            .tnc .tnc-container .tnc-intro .three {
                font-weight: 600;
            }

        .tnc .tnc-container .tnc-parties {
        }

            .tnc .tnc-container .tnc-parties .title {
                font-size: 2rem;
                color: var(--clr-dark-blu);
            }

            .tnc .tnc-container .tnc-parties .one {
            }

            .tnc .tnc-container .tnc-parties .two {
            }

        .tnc .tnc-container .tnc-agreed-terms {
        }

            .tnc .tnc-container .tnc-agreed-terms .title {
                font-size: 2rem;
                color: var(--clr-dark-blu);
            }

            .tnc .tnc-container .tnc-agreed-terms .terms-1 {
            }

            .tnc .tnc-container .tnc-agreed-terms .term-title {
                color: var(--clr-dark-blu);
                font-weight: 600;
            }

            .tnc .tnc-container .tnc-agreed-terms .sub-term-title {
                margin-left: 2rem;
            }

            .tnc .tnc-container .tnc-agreed-terms .sub-content {
                margin-left: 4rem;
            }

            .tnc .tnc-container .tnc-agreed-terms .sub-content-title {
                margin-left: 6rem;
            }

            .tnc .tnc-container .tnc-agreed-terms .sub-content-sub {
                margin-left: 8rem;
            }

            .tnc .tnc-container .tnc-agreed-terms .sub-content-sub-sub {
                margin-left: 10rem;
            }


    .tnc .tnc-accept {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 15vh;
        width: 100%;
        background-color: var(--clr-dark-blu);
        position: fixed;
        bottom: 0;
    }

.color-blue {
    color: var(--clr-dark-blu);
    font-style: italic;
    color: var(--clr-dark-blu);
    font-weight: 400;
    font-style: italic;
}

.tnc-accept #acceptButton {
    background-color: var(--clr-pastel-red); /* Background color when enabled */
    color: white; /* Text color when enabled */
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .tnc-accept #acceptButton:disabled {
        background-color: var(--clr-dirty-white); /* Default background color when disabled */
        cursor: not-allowed; /* Change cursor to not-allowed when disabled */
        color: var(--clr); /* Change text color if needed */
    }

/* -------------------------------------- */
/* ------- Mobile View Design CSS ------- */
/* -------------------------------------- */

@media screen and (max-width: 992px) {

    .nav-account-cart {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

        .nav-account-cart a {
            padding-block: var(--fs-8);
        }

        .nav-account-cart .nav-search-bar input {
            width: 50%;
        }

    .ad-container-images {
        width: 50%;
        margin: var(--fs-16);
    }

    .nav-search-bar {
        width: 70%;
    }

    .nav-search-container {
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: center;
    }

    .nav-search-bar input {
        text-align: center;
        width: 40%;
        font-size: 1rem;
    }

    .ad-container-description .ad-container-buttons button {
        width: 40%;
        padding: 1rem;
    }

    .popular-categories .cards .card-header {
        width: 20vw;
        height: 15vh;
    }

    .shop .cards-grid {
        grid-template-areas:
            "zero zero zero"
            "one one one"
            "two two two"
            "three three three"
            "four four four"
            "five five five"
            "six six six";
    }
}

@media screen and (max-width: 768px) {
    .popular-categories .cards .card-header {
        width: 30vw;
        height: 15vh;
    }
}

@keyframes animateBlob {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}


.nav-active {
    color: var(--clr-pastel-red) !important;
    /*border-bottom: 1px solid var(--clr-pastel-red) !important;*/
}

/* Custom styles for animated progress bars */
@keyframes progress-animation {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.progress-bar.animated {
    background-size: 200% 100%;
    animation: progress-animation 1.5s linear infinite;
}

/* Progress bar widths for levels */
.progress-bar.level-0 {
    width: 0%;
}

.progress-bar.level-1 {
    width: 25%;
}

.progress-bar.level-2, .progress-bar.level-12 {
    width: 50%;
}

.progress-bar.level-3, .progress-bar.level-13 {
    width: 75%;
}

.progress-bar.level-4, .progress-bar.level-14 {
    width: 100%;
}

/* Progress bar widths for tiers */
.progress-bar.tier-0 {
    width: 0%;
}

.progress-bar.tier-1 {
    width: 14%;
}

.progress-bar.tier-2 {
    width: 28%;
}

.progress-bar.tier-3 {
    width: 42%;
}

.progress-bar.tier-4 {
    width: 56%;
}

.progress-bar.tier-5 {
    width: 70%;
}

.progress-bar.tier-6 {
    width: 84%;
}

.progress-bar.tier-7 {
    width: 100%;
}

/*.scrollableTable{
    overflow-x: scroll !important;
}*/

.loader2 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #FFF;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

    .loader2::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border-bottom: 4px solid #FF3D00;
        border-left: 4px solid transparent;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure the loader is on top */
}

.loader {
    position: relative;
    width: 100px;
    height: 130px;
    background: #fff;
    border-radius: 4px;
}

    .loader:before {
        content: '';
        position: absolute;
        width: 54px;
        height: 25px;
        left: 50%;
        top: 0;
        background-image: radial-gradient(ellipse at center, #0000 24%,#de3500 25%,#de3500 64%,#0000 65%), linear-gradient(to bottom, #0000 34%,#de3500 35%);
        background-size: 12px 12px, 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        transform: translate(-50%, -65%);
        box-shadow: 0 -3px rgba(0, 0, 0, 0.25) inset;
    }

    .loader:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        width: 66%;
        height: 60%;
        background: linear-gradient(to bottom, #f79577 30%, #0000 31%);
        background-size: 100% 16px;
        animation: writeDown 2s ease-out infinite;
    }

@keyframes writeDown {
    0% {
        height: 0%;
        opacity: 0;
    }

    20% {
        height: 0%;
        opacity: 1;
    }

    80% {
        height: 65%;
        opacity: 1;
    }

    100% {
        height: 65%;
        opacity: 0;
    }
}


.disabled-card {
    background-color: #ced4da; /* Light gray background */
    color: #495057; /* Darker gray text for contrast */
    border-color: #adb5bd; /* Light border color */
}

    .disabled-card .btn {
        background-color: #adb5bd; /* Light gray button color */
        color: #fff; /* White text color for the button */
        opacity: 0.65; /* Make button appear disabled */
        pointer-events: none; /* Prevent interactions */
    }

    .disabled-card .text-muted {
        color: #6c757d; /* Medium gray for muted text */
    }

.voucher-container {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.voucher-label {
    font-size: 14px;
    color: #333;
    margin-right: 10px;
}

.voucher-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.apply-button {
    padding: 8px 12px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
}

    .apply-button:hover {
        background-color: #e0e0e0;
    }


.voucher-container1 {
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.voucher-icon {
    background-color: #7ad4a6;
    color: white;
    font-weight: bold;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.error-message {
    color: #e74c3c;
    font-size: 13px;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 15px;
}

.time-range {
    font-size: 12px;
    color: #e74c3c;
    font-weight: bold;
    border: 1px solid #e74c3c;
    border-radius: 4px;
    padding: 2px 6px;
}