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

/* font-family: 'Playfair Display', serif;  */
/* font-family: 'Roboto', sans-serif;  */

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

/* font-family: 'Poppins', sans-serif;  */



::-webkit-scrollbar {
    width: 8px;
    height: 6px;
    border: 5px solid white;
    background-color: #fff;
}

::-webkit-scrollbar-corner {
    width: 10px;
    border: 4px solid white;
}

::-webkit-scrollbar-thumb {
    background-color: black;
    background-clip: padding-box;
    border: 0.03em solid black;
}


/* ============  HEADER TOP ============ */

#HeaderTop{
    padding:1.3% 0 1.3% 0;
    background-color:rgba(0, 0, 0, 0.1);
}

    #HeaderTop .BigTitle {
        text-align:center;
    }

        #HeaderTop .BigTitle h1 {
            font-size: 2.2em;
            font-weight: 700;
            letter-spacing: 2px;
            font-family: 'Roboto', sans-serif;
            color: #f8b12d;
            padding-bottom:0.3%;
            /*color: rgba(228, 155, 15, 0.9);*/
        }

        #HeaderTop .BigTitle h6 {
            font-size: 1.4em;
            font-weight: 600;
            letter-spacing: 1px;
            font-family: 'Roboto', sans-serif;
            color: dimgrey;
        }



/* ============  NAVBAR ============ */
header {
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 1.95px 1.95px 2.6px;
}

.navbar {
    height: 80px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    .navbar .navbar-brand {
        text-decoration: none;
        background-color:#000;
        padding: 20px 30px;
        border-radius:10px;
    }

        .navbar .navbar-brand img {
            width: 190px;
            height: auto;
        }

    .navbar .navbar-nav.RealMenu .nav-item {
        margin-right: 15px;
    }

    .navbar .navbar-nav .nav-item .nav-link {
        text-decoration: none;
        font-size: 1.1em;
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
        letter-spacing: 3px;
        color: black;
    }


    .navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
        background: #ececec;
    }



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

    .navbar {
        height: 80px;
        width: 99%;
    }


        .navbar .navbar-nav .nav-item .nav-link {
            font-size: 1.05em;
            font-weight: 300;
            letter-spacing: 3px;
        }

        .navbar .navbar-brand img {
            width: 150px;
            height: auto;
        }
}


@media only screen and (max-width: 1460px) {
}

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

    .navbar .navbar-brand img {
        width: 130px;
        height: auto;
    }
}

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

    .navbar .container-fluid {
        width: 100%;
    }

    .navbar #navbarNav {
        z-index: 999;
        background: #fff;
        padding-top: 10%;
        padding-bottom: 10%;
        text-align: center;
        height: auto;
    }

        .navbar #navbarNav .nav-item {
            border-bottom: 1px solid rgba(0,0,0, 0.3);
            margin-bottom: 10px;
            margin-right: 0;
        }

    .navbar .navbar-nav .nav-item .nav-link {
        font-size: 1.1em;
        font-weight: 400;
    }

    .navbar #navbarNav .nav-item .dropdown-menu {
        text-align: center;
        border: none;
        font-size: 1.1em;
        font-weight: 400;
    }
}


/* ============  FOOTER ============ */
footer {
    background-color: black;
    width: 100%;
    color: white !important;
    font-family: 'Poppins', sans-serif;
}

    footer .container-fluid {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 3%;
        padding-bottom: 1%;
        height: auto;
    }




    footer .Footer-Sub h5 {
        font-family: 'Poppins', sans-serif;
        font-size: 0.9em;
    }

    footer .Footer-Sub a {
        color: white !important;
        font-family: 'Poppins', sans-serif;
        text-decoration: none;
        font-size: 0.75em;
        line-height: 2em;
    }


    footer .Footer-Social h5 {
        font-family: 'Poppins', sans-serif;
        font-size: 0.9em;
    }

    footer .Footer-Social a {
        color: white !important;
        text-decoration: none;
        font-size: 1.5em;
        margin-right: 2.7%;
    }


    footer .Sub-Row h6 {
        color: white !important;
        font-family: 'Poppins', sans-serif;
        font-size: 0.7em;
        line-height: 2em;
    }

    footer .Sub-Row a {
        color: white !important;
        font-family: 'Poppins', sans-serif;
        text-decoration: none;
        font-size: 0.7em;
        line-height: 2em;
    }



/* ================== ALL HEADER BACKGROUND ========================= */


#AllHeader {
    width: 100%;
    height: 10px;
    background: #fff;
    position: relative;
    border-top: 2px solid grey;
    /*        border-bottom: 2px solid grey;*/
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}


    /*
    #AllHeader .Box {
        width: 100%;
        height: 100%;
    }

        #AllHeader .Box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }*/

    #AllHeader .Text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

        #AllHeader .Text h1 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 2.5em;
            color: #12110e;
            text-align: center;
        }

        #AllHeader .Text .Breadcumb {
            text-align: center;
            padding-top: 10px;
        }

            #AllHeader .Text .Breadcumb a, span {
                font-family: 'Poppins', sans-serif;
                font-weight: 400;
                font-size: 1.1em;
                color: #12110e;
                text-decoration: none;
            }

                #AllHeader .Text .Breadcumb a:first-child {
                    font-family: 'Poppins', sans-serif;
                    font-weight: 600;
                }




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


    #AllHeader .Text h1 {
        font-size: 2.1em;
    }
}

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

    #AllHeader {
        height: 130px;
    }

        #AllHeader .Text {
            width: 98%;
        }
}


/* ============  WHATSAPP ============ */

#WhatsappSection {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 1029;
}

    #WhatsappSection img {
        width: 65px !important;
    }

#WhatsappSection #WhatsappMessage {
    opacity: 1;
    transition: 0.5s ease all;
}

#WhatsappSection:hover #WhatsappMessage {
    opacity: 1;
    transition: 0.5s ease all;
}

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

    #WhatsappSection {      
        bottom: 55px;
        right: 10px;
    }

    #WhatsappSection img {
        width: 55px !important;
    }
}



/* ============  ADVERTISING BAND  ============ */


#AdvertisingBand .Content {
    background-color: #000000;
    height: 40px;
    width: 100%;
}

    #AdvertisingBand .Content marquee {
        height: 80px;
        width: 80%;
        line-height: 40px;
        color: #fff;
        font-size: 1em;
        font-weight: 400;
        margin-left: 10%;
        margin-right: 10%;
    }


        #AdvertisingBand .Content marquee img {
            height: 20px;
            width: auto;
        }


/* ============  FOOTER MENU BAR  ============ */



#FooterMobilMenuBar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-top: 1px solid rgba(0,0,0, 0.5);
    height: auto;
    z-index: 1029;
}



    #FooterMobilMenuBar .Card {
        position: relative;
        padding: 0;
        margin: 6px 5px;
    }

        #FooterMobilMenuBar .Card a {
            color: black;
            text-decoration:none !important;
        }


        #FooterMobilMenuBar .Card .Icon {
            text-align: center;
            padding:3px 0;
            position:relative;
        }



            #FooterMobilMenuBar .Card .Icon img {
                height: 30px;
                width: auto;
            }

            #FooterMobilMenuBar .Card .Icon.Basket span {
                position: absolute;
                top: 62.5%;
                left: 50%;
                transform: translate(-50%,-50%);
                color: black;
                font-family: 'Poppins', sans-serif;
                font-size: 0.85em;
                font-weight: bold;
            }



    @media only screen and (max-width: 780px) {
        #FooterMobilMenuBar {
        display:block;
    }
}