/* styles that are used on 100% of the pages */

@font-face{
    font-family: "Book Antiqua";
    src: url("/fonts/Book-Antiqua-Font/Book\ Antiqua\ Font.ttf") format("truetype");
    font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	font-display: swap;
	unicode-range: U+000-5FF;
}

html{
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    font-weight: 400;
    font-family: sans-serif, Helvetica, Arial, sans-serif;
    color: #000;
    background-color: #eeee;
    overflow-x: hidden;
    position: relative;
}

/* header */
.header{
    padding: 2rem 0 3rem 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.floatWhatsapp {
    position: fixed;
    z-index: 100000;
    bottom: 5svh;
    right: 10px;
}


/* brown banner with facebook link */
.welcomeBlock {
    width: 100%;
    background-color: #A37B4B;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: "Book Antiqua";
}

.welcomeBlock p {
    font-size: 1.2rem;
    padding-left: 4rem;
}

.welcomeBlockLink {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 4rem;
}

.welcomeBlockSVG {
    width: 25px;
    height: 25px;
}


/* top contact block with links */
.topContactBlock {
    padding: 2rem 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    row-gap: 20px;
}

.contactBlock {
    min-width: 250px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.contactBlockColumn {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
}

.contactBlockLink {
    text-decoration: none;
    color: #000;
}


/* navigation bar */
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background-color: #CBC7C7;
    border-radius: 50px;
    margin-left: 3rem;
    margin-right: 3rem;
}

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

.navCheck,
.navButton {
    display: none;
}

.navUl {
    width: 60%;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    column-gap: 4%;
}

.navLink {
    text-decoration: none;
    color: #000;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
}

/* .mobileNavUl {
    display: ;
} */

.main{
    padding: 0 2dvw;
    min-height: 80dvh;
    display: flex;
    flex-direction: row;
    padding: 10rem;
}

.footer{
    padding: 4rem 2dvw 0 2dvw;
    background-color: #CBC7C7;
    min-height: 10dvh;
}

.footerTopRow {
    display: flex;
    justify-content: flex-end;
}

.logoblock {
    width: 58%;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;   
    align-items: flex-end;
    padding: 0 3rem 0 2rem;
}

.banner {
    background-color: #A37B4B;
    padding: .1rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: 3px;
}

.beeHeading {
    padding-left: 10px;
}

.footerContact {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

.footerContactList,
.footerContactLink {
    list-style: none;
    font-size: 1.8rem;
    line-height: 2;
}

.footerContactLink {
    text-decoration: none;
    color: #000;
}

.footerBottomRow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Bit smaller tablet screen */
@media (max-width:1280px) {
    .welcomeBlock {
        justify-content: space-evenly;
    }
}

@media (max-width:911px) {
    .footerContact {
        /* display: flex; */
        /* flex-direction: row; */
        flex-wrap: wrap;
        justify-content: space-evenly;
        /* align-items: center; */
        /* padding: 0 2rem; */
    }
    .footerContactList {
        /* background-color: red; */
        order: 0;
        width: 40%;
    }

    .zeroToWaste {
        order: 2;
        width: 80%;
        /* background-color: purple; */
        transform: translateY(-55px);
        margin-bottom: -80px;
    }

    .footerContactLink {
        /* background-color: blue; */
        order: 1;
        width: 50%;
    }
}

/* tablet screen */
@media (max-width:700px) {
    .navButton {
        display: block;
        background-color: transparent;
        border: none;
        font-size: 2rem;
        font-weight: 600;
        position: relative;
    }


    .navUl {
        flex-direction: column;
        position: absolute;
        font-size: 2rem;
        line-height: 2;
        background-color: #CBC7C7;
        width: 250px;
        border-radius: 10px;
        right: 3.5rem;
        top: 28rem;
        z-index: 999;
        padding: 0;
        text-align: center;
        display: none;
    }

    #menu-bar:checked ~ .navUl {
        display: initial;
    }

    .navLi {
        padding-left:0;
        text-align: center;
        border-bottom: #A37B4B solid 1px;
    }

    .mobileNavLi:last-child {
        border: none;
    }
}

/* Phone screen */
@media (max-width:600px) {

    .welcomeBlock {
        padding: 0;
        margin: 0;
    }

    .welcomeBlock p {
        padding: 0 1rem;
        width: 60%;
        text-align: center;
    }

    .navbar {
        width: 100%;
        margin: 0;
        border-radius: 0;
        justify-content: space-evenly;
    }

    .topContactBlock {
        display: none;
    }

    .navUl {
        top: 9rem;
        width: 100%;
        right: 0;
    }

    .footer{
        padding: 1rem;
    }
    
    .footerTopRow {
        justify-content: center;
    }
    
    .logoblock {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding: 0;
    }
    
    .beeHeading {
        padding-left: 0;
    }
    
    .footerContact {
        /* flex-direction: column; */
        padding: 0 1rem;
    }

    .footerContactList {
        /* background-color: red; */
        order: 0;
        width: 70%;
    }

    .zeroToWaste {
        order: 2;
        width: 80%;
        /* background-color: purple; */
        transform: translateY(-10px);
        margin-bottom: -30px;
    }

    .footerContactLink {
        /* background-color: blue; */
        order: 1;
        width: 60%;
    }
}

@media (max-width:450px) {
    
}