a {
    color: #000;
    text-decoration: none;
}

header {
    /* position: relative;
    z-index: 5; */
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50px);
    }
}

@keyframes moveLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50px);
    }
}

header .border {
    border-radius: 0 0 45px 45px !important;
}

.searchBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
}

/* intro */
#intro {
    position: relative;
}

#intro .intro-slider {}

#intro .bottom-slider1 {
    position: absolute;
    bottom: -0.33vh;
    right: 40%;
    transform: translateX(-50%);
    z-index: 1;
    width: 4.8%;
}

#intro .bottom-slider2 {
    position: absolute;
    bottom: -1px;
    left: 44.5%;
    transform: translateX(-50%);
    z-index: 1;
    width: 4.1%;
}


/* card-first */

.card-first {
    position: relative;
    background-color: #fbc1c0;
    border-radius: 20px;
    /* height: 20vh; */

}

.card-first h5 {
    color: #5f0102;
}

.card-first .svg {
    width: 30vh;
    fill: #5f0102;
    margin-bottom: -4vh;
    margin-top: -6vh;
    margin-right: -15vh;
}

.card-first img {
    position: absolute;
    top: 43%;
    transform: translate(-50%, -50%);
    height: 30vh;
}


#category {
    position: relative;
}

#category .box-category {
    padding-right: 14vh;
}
#page-product{
    position: relative;
}
#category .child , #page-product .child{
    position: absolute;
    z-index: -1;
}

#category .child-1  , #page-product .child-1 {
    width: 25vh;
    top: 0;
    left: 0;
    animation: moveRight 2s infinite alternate ease-in-out;
}

#category .child-2  , #page-product .child-2 {
    width: 15vh;
    top: 7%;
    left: 12%;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#category .child-3  , #page-product .child-3 {
    width: 9vh;
    top: 55%;
    left: 15%;
    animation: moveRight 2s infinite alternate ease-in-out;
}

#category .child-4  , #page-product .child-4 {
    width: 20vh;
    top: 70%;
    left: 5%;
    rotate: -20deg;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#category .child-5  , #page-product.child-5 {
    width: 15vh;
    top: 89%;
    left: 12%;
    animation: moveRight 2s infinite alternate ease-in-out;
}

#category .child-6  , #page-product .child-6 {
    width: 20vh;
    top: 5%;
    left: 5%;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#category .child-7  , #page-product .child-7 {
    width: 20vh;
    top: 5%;
    left: 5%;
    animation: moveRight 2s infinite alternate ease-in-out;
}

#category .child-8  , #page-product .child-8 {
    width: 20vh;
    top: 5%;
    left: 5%;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#category .child-9  , #page-product .child-9 {
    width: 12vh;
    top: 5%;
    right: 20%;
    animation: moveRight 2s infinite alternate ease-in-out;
}

#category .child-10 , #page-product .child-10 {
    width: 30vh;
    right: -5%;
    top: 0%;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#category .child-11 , #page-product .child-11 {
    width: 10vh;
    right: 4%;
    top: 55%;
    animation: moveRight 2s infinite alternate ease-in-out;
}

#category .child-12 , #page-product .child-12 {
    width: 6vh;
    top: 15%;
    left: 25%;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#category .child-13 , #page-product .child-13 {
    width: 20vh;
    bottom: 5%;
    right: 0;
    animation: moveRight 2s infinite alternate ease-in-out;
}

#category .child-14 , #page-product .child-14 {
    width: 20vh;
    top: 5%;
    left: 5%;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#category .child-15 , #page-product .child-15 {
    width: 20vh;
    top: 5%;
    left: 5%;
    animation: moveRight 2s infinite alternate ease-in-out;
}


/* offer */

.box-offer {
    background: #FF0101;
    background: radial-gradient(circle, rgba(255, 1, 1, 1) 0%, rgba(159, 0, 1, 1) 100%);
    border-radius: 15px;
}

#offer {
    position: relative;
    padding-bottom: 15vh;
}

#offer .circel {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50px;
}


#offer .owl-nav {
    position: absolute;
    top: -20%;
    display: flex;
    font-size: 40px;
    gap: 13px;
}
#products{
    overflow: hidden;
    position: relative;
}
#offer .child , #products .child{
    position: absolute;
    z-index: -1;
}

#offer .child-6 , #products .child-6{ 
    top: 15%;
    width: 29vh;
    left: -5%;
    z-index: -1;
    animation: moveRight 2s infinite alternate ease-in-out;
}
#products .child-7 {
    bottom: 35%;
    left: 0%;
}
#offer .child-7 { 
    bottom: 5%;
    left: -5%;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#offer .child-8 , #products .child-8{ 
    bottom: 2%;
    left: 5%;
    width: 18vh;
    animation: moveRight 2s infinite alternate ease-in-out;
}
#products .child-14{
    top: 0%;
    right: 5%;
}
#offer .child-14{
    top: 5%;
    right: 15%;
    animation: moveLeft 2s infinite alternate ease-in-out;
}

#offer .child-15 , #products .child-15{
    z-index: -1;
    top: 35%;
    right: 0%;
    animation: moveRight 2s infinite alternate ease-in-out;
}


/* company */

#company .box-company {
    background-image: url('../images/3.png');
    background-repeat: no-repeat;
    background-size: 100%;
}


/* food */
#food {
    position: relative;
}

#food .food-child-1 {
    position: absolute;
    left: -1%;
    top: 40%;
    z-index: -1;
}

#food .food-child-2 {
    position: absolute;
    right: -1%;
    top: 40%;
    z-index: -1;
}

#food .custom-1 {
    margin-top: 15px;
}

#food .custom-2 {
    margin-top: 10vh;
}

#food .custom-3 {
    margin-top: 15vh;
}

footer {
    background-image: url('../images/Footer.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 8vh;
    position: relative;
}

footer .row {
    background-color: #292929;
}

footer .svg-angle-down {
    /* position: absolute; */
    top: 15%;
    right: 50%;
    transform: translate(50%, -50%) !important;
    /* width: 2px !important; */
}

footer .svg-angle-down svg {
    /* width: 2px !important;
    font-size: 15px !important; */
}




/* gallery */

#gallery {
    display: grid;
    height: calc(100vh - 10px);
    grid-template: repeat(6, 1fr)/repeat(6, 1fr);
    grid-gap: 0.5em;
}

@media (max-width: 800px) {
    #gallery {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: center;
    }

    #gallery>div {
        width: 48%;
        margin: 1%;
    }
}

@media (max-width: 800px) and (max-width: 350px) {
    #gallery>div {
        width: 98%;
    }
}

#gallery>div:nth-child(6n+1) {
    grid-column: span 2;
    grid-row: span 2;
}

#gallery>div:nth-child(2) {
    grid-column: span 3;
    grid-row: span 3;
}

#gallery>div:nth-child(4) {
    grid-column: span 1;
    grid-row: span 2;
}

#gallery>div>a {
    opacity: 0;
    position: absolute;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 2em;
    padding: 2rem;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease 0.5s;
}

#gallery>div>img {
    width: 100%;
    min-height: 100%;
    transition: all ease 1s;
}

#gallery>div:hover img {
    filter: blur(4px);
}

#gallery>div:hover a {
    opacity: 1;
}

#gallery>div {
    overflow: hidden;
    position: relative;
}

#gallery div,
#gallery a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}


/* pagination */

.active>.page-link,
.page-link.active {
    background-color: #292929;
    border-color: #292929;
}

.page-link {
    color: #292929;
}

.page-link:hover {
    color: #292929;
}


#products {

    .card{
        border-radius: 40px;
        overflow: hidden;
        border: 0;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06),
            0 2px 4px rgba(0, 0, 0, 0.07);
        transition: all 0.15s ease;
    }

    .card:hover {
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1),
            0 10px 8px rgba(0, 0, 0, 0.015);
    }

    .card-body .card-title {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        letter-spacing: 0.3px;
        font-size: 24px;
        color: #121212;
    }

    .card-text {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 15px;
        letter-spacing: 0.3px;
        color: #292929;

    }

    .card .container {
        width: 88%;
        background: #F0EEF8;
        border-radius: 30px;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container:hover>img {
        transform: scale(1.2);
    }

    .container img {
        padding: 50px;
        margin-top: -40px;
        margin-bottom: -40px;
        transition: 0.4s ease;
        cursor: pointer;
    }

    .btn {
        background: #EEECF7;
        border: 0;
        color: #292929;
        width: 98%;
        font-weight: bold;
        border-radius: 20px;
        height: 40px;
        transition: all 0.2s ease;
    }

    .btn:hover {
        background: #464545;
    }

    .btn:focus {
        background: #464545;
        outline: 0;
    }
}