* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 20px;
}

body {
    background-color: #ADADAD;
}


/* Colors 
    1. #2E1114 -- Dark red --towards brown
    2. #501B1D -- faded red
    3. #64485C -- faded purple -- little darkish
    4. #83677B -- faded lighter purple
    5. #ADADAD -- very light gray
    6. #d4d3d3 -- almost white -- for text
*/


/* Font Families
    1. font-family: 'Style Script', cursive;
    2. font-family: 'Roboto', sans-serif;
    3. font-family: 'Abril Fatface', cursive;
    4. font-family: 'Poppins', sans-serif;
    

*/





/* 
#############################################
---------------------------------------------
            LOGO & NAME SECTION
---------------------------------------------
############################################# 
*/

#logo__section__main__div {

    width: 100%;
    height: 20vh;
    background-color: #d4d3d3;
    border-bottom: 2px solid #2E1114;
}

.logo__div__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 5vw;
}

.logo__image__div {
    margin-top: 2em;
}

.logo__image__div img {
    width: 6vw;
    height: auto;
}

.logo__text__div {
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.logo__text__div .logo__main__heading {
    font-size: 220%;
    font-family: 'Abril Fatface', cursive;
    letter-spacing: 3px;
    color: #2E1114;
}

.logo__text__div .logo__main__heading:hover {
    cursor: pointer;
}

.logo__text__div .logo__sub__heading {
    font-size: 90%;
    margin-top: 1vh;
    letter-spacing: 3px;
    color: rgb(139, 56, 8);
}

.logo__text__div .logo__main__heading:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: width .5s ease, border-bottom .5s ease;
}

.logo__text__div .logo__main__heading:hover:after {
    width: 60%;
    border-bottom: 2px solid rgb(70, 22, 22);
}

.logo__image__duplicate {
    opacity: 0;
}


/* 
#############################################
---------------------------------------------
            MENU NAVBAR SECTION
---------------------------------------------
############################################# 
*/

#navbar__main {
    width: 100%;
    height: 10vh;
    background-color: #5c1f25;
    z-index: 1;
    position: relative;
}

.navbar2__main__div {
    padding: 23px 6vw;
}

.navbar2__main__div ul li {
    display: block;
    float: left;
    margin-right: 3vw;
    list-style: none;
}

.navbar2__main__div ul li a {
    text-decoration: none;
    color: #d4d3d3;
    font-family: 'Baloo 2', cursive;
    font-weight: bold;
    padding: 10px 10px;
    border-radius: 3px;
    transition: background-color .5s ease, color .2s ease, padding 0.2s ease;
    position: relative;
}

.navbar2__main__div ul li a:hover {
    background-color: #d4d3d3;
    font-weight: bold;
    color: #5c1f25;
    padding: 6px 10px;
    border-radius: 3px;
}

.navbar2__main__div .active {
    background-color: #b4b2b2;
    font-weight: bold;
    color: #5c1f25;
    padding: 6px 10px;
    border-radius: 3px;
}




/* 
#############################################
---------------------------------------------
            SLIDER MAIN SECTION
---------------------------------------------
############################################# 
*/

#slider__section__main__div {
    width: 100%;
    height: 70vh;
    background-image: linear-gradient( rgb(78, 17, 17), #ADADAD);
}

.slider {
    display: none;
}

.slider__container {
    max-width: 80vw;
    margin: auto;
}

.slider__container img {
    margin: 5vh 0 0 0;
    width: 100%;
    height: 60vh;
    /* border: 2px solid black; */
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    animation-name: fade;
    animation-duration: 3s;
}

@-webkit-keyframes fade {
    from {
        opacity: .8
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .8
    }
    to {
        opacity: 1
    }
}


/* 
#############################################
---------------------------------------------
            PRODUCTS MAIN SECTION
---------------------------------------------
############################################# 
*/

#product__section__main__div {
    margin: 8vh 3vw;
}

.products__container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* padding-bottom: 40px; */
}

.product {
    padding: 10px;
    text-align: center;
    /* background-color: rgb(230, 222, 222); */
    background-image: linear-gradient( rgb(197, 194, 194), white, rgb(197, 194, 194), white, rgb(197, 194, 194));
    border: 2px solid #5c1f25;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
}

.product:hover {
    box-shadow: 5px 5px 10px #5c1f25;
}

.product .product__text {
    margin: 1.5vh;
}

.product .product__text h3 {
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 7px;
    color: #350f13;
}

.products__container .product img {
    width: 25vw;
    height: 30vh;
    margin: 5px;
}

.product p {
    margin: 10px;
}

.product p a {
    text-decoration: none;
    color: white;
    background-color: #2D2926FF;
    padding: 5px 9px;
    border-radius: 3px;
    /* font-weight: bold; */
    font-family: Arial, Helvetica, sans-serif;
}

.product p a:hover {
    border: 2px solid rgb(156, 30, 41);
}


/* 
#############################################
---------------------------------------------
           FOOTER SECTION
---------------------------------------------
############################################# 
*/

footer {
    width: 100%;
    height: 12vh;
    background-color: #d4d3d3;
    /* background-color: #1f080a; */
}

.footer__main__container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 2vh 0;
}

.footer__content {
    font-family: 'Roboto', sans-serif;
    font-size: 80%;
}

.part2 p {
    font-size: 100%;
}

.part3 p a {
    font-size: 90%;
    text-decoration: none;
    padding: 5px 8px;
    background-color: rgb(49, 49, 49);
    border-radius: 3px;
    color: white;
    transition: border 0.5s ease, background-color 0.5s ease-in-out;
}

.part3 p a:hover {
    color: black;
    border: 2px solid black;
    background-color: transparent;
}