:root{

    --background-color:whitesmoke;
    --mother-box-color:#3e4042;
    --recipes-cards-color:#323438;
    --navbar-color:#CABFAB;

}

body{

    background-color: var(--background-color);

    color:azure;

}

.motherBox{

    background-color: var(--mother-box-color);

    flex-direction: column;

}


.carouselImage{

    filter: brightness(50%);

    width: 100%;
    height:600px;

    --carousel-transition-duration: 4s;

}


.carouselContainer{

    padding-top: 10%;

}


.imagesContainer{

    gap: 3rem;

    justify-content: center;


}

.categoriesImage{

    width: 150px;
    height: 150px;

    border-radius: 100%;

    filter: brightness(50%);

}


.slideDescription{

    position: relative;
    transform: translateY(-440px);
    left: 28%;
    z-index: 2;

    width: 500px;
    height: 300px;

    font-size: 1.5rem;

    color:azure;

    border:solid 4px azure;

}


.recipeTitle{

    font-size: 1.7rem;

}


.rowCarousel{

    display:flex;
    justify-content: center;

}

.c-container{

    display: flex;
    flex-flow: column;
    justify-content: start;
    
}


.title-container{

    margin-top: 7%;

}

.navBar{

    margin: 1rem 0 3rem 0;

}

.navbar {

    background-color:#111111;

}


.titleForCategories{

    margin-top: -15%;
    margin-bottom: 10%;

}


.imagesContainer{

    margin-bottom: 4rem;

}


.categoryImageContainer{

    width: fit-content;
    height: fit-content;

    display: flex;
    flex-direction: column;

}


.categorieTitle{

    font-size: 1.3rem;
    text-align: center;
    color: azure;

    transform: translateY(-5rem);

}


.categoriesContainer{

    margin-bottom: 3rem;

}


.recipesContainer{

    gap:1rem;

}


.recipesTitle{

    margin-bottom: 3rem;

    text-align: center;

}


.cardsRow{

    margin-bottom: 3rem;

}

.card{

    width: 16rem;

    background-color: var(--recipes-cards-color);

    color:azure;

}


.card-img-top{

    height: 200px;

}


.card-title{

    color:azure;

    text-align: center;

}


.nav-item{

    font-size: 1.5rem;

}


#navbarSupportedContent{

    gap:2rem;

}

.navbar-brand{

    font-size: 2rem;

    margin-right: 7rem;

}



.navbar-nav{

    gap:3rem;

}


.pageFooter{

    height: 180px;

    display: flex;
    justify-content: center;
    align-items: center;

    gap:3%;

}

.footerSection{

    height: 80%;

    z-index: 2;

}


#footerIconsSection{

    width: 45%;

    display: flex;

    flex-flow: column;

    align-items: end;

    justify-content: center;

    gap:1rem;

    padding-right: 2rem;

}


.socialMediaIcon{

    width: 2.5rem;

    height: 2.5rem;

}

.socialMediaLink{

    width: fit-content;
    height: fit-content;

    text-decoration: none;

}



#footerLinksSection{

    width: 55%;

    display: flex;

    justify-content: flex-start;

    align-items: center;

}

.footerImage{

    z-index: 1;

    width: 92%;
    height: 23%;

    filter: brightness(50%);

    position: absolute;

}


#inconsBox{


    gap:1rem;

}


.socialLinksTitle{

    text-align: center;

    width: 45%;

}


.footerLink{

    font-size: 1.7rem;

    color: azure;

    text-decoration: none;

}


.footerLink:hover{

    color:var(--recipes-cards-color);

}


#footerLinksBox{

    display: flex;

    width: fit-content;
    height: fit-content;

    gap: 2rem;

    margin-left: 4rem;

}


.pageMainTitle{

    font-size: 4rem;

}


@media(max-width:500px){

    .motherBox{

        padding-right: 0.3rem;
        padding-left: 0.3rem;

    }


    .categoriesImage{

        width: 200px;
        height: 200px;

    }

    .recipesTitle{

        font-size: 0.6rem;

    }


    .carouselImage{

        height: 300px;

    }


    .cardsRow{

        gap:1rem;

    }

    .recipesContainer{

        display: flex;

        flex-flow: column;

        align-items: center;

    }


    .navbar-brand{

        margin:0;

    }

    .navbar{

        margin-bottom: 0.4rem;
        margin-top: 0.5rem;

    }


    .navbar-nav{

        gap:0;

        text-align: center;

    }


    .nav-item{

        font-size: 1rem;

        height: fit-content;

    }


    .imagesContainer{

        margin-top: 2rem;

        display: flex;

        align-items: center;

        width: 100%;

        height: fit-content;

        flex-flow: column;

        gap:0.5rem;

    }

    .categorieTitle{

        transform: translateY(-7.5rem);

        font-size: 2.5rem;

    }


    .titleForCategories{

        font-size: 3rem;

    }


    .pageMainTitle{

        font-size: 3.3rem;

        margin-bottom: 5rem;

    }


    .slideDescription{

        font-size: 0.7rem;

        width:200px;

        height:170px;

        margin:0;

        transform:translateY(-230px);

        left:25%;


    }

    .recipeCard{

        display: flex;
        justify-content: center;

    }


    #footerLinksBox{

        gap:0.5rem;

        margin-left: 4rem;

        flex-flow: column;

    }


    .footerLink{

        font-size: 1rem;

    }

    .socialLinksTitle{

        font-size: 1.2rem;

        width: 100%;

    }

    .socialMediaIcon{

        width: 2rem;
        height: 2rem;

    }


    #footerIconsSection{

        margin-right: 1rem;

        padding: 0;

    }


    .pageFooter{

        gap:0.3rem;

        padding: 0;

    }

}


@media(max-width:380px){

    .slideDescription{

        left: 18%;

    }


    .pageMainTitle{

        font-size: 2.7rem;

        margin-bottom: 4rem;

        margin-top: 3rem;

    }


    .titleForCategories{

        font-size: 2.5rem;

        margin-bottom: 4rem;

    }


    .socialMediaIcon{

        width: 1.5rem;
        height: 1.5rem;

    }


    #footerIconsSection{

        gap:0.5rem;

    }

}