*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Alegreya", serif;
}
a{
    text-decoration: none;
}
.container{
    width: 90%;
    margin: 0 auto;
}
.clear{
    clear: both;
}

/* navbar */
nav{
    position: fixed;
    top: 0px;  
    width: 100%;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
nav .content .logo,
nav .content .list{
    float: left;
    width: 50%;    
}
nav .content .logo{
    text-align: left;    
}
nav .content .logo img{
    width: 180px;
    margin: 10px 0px;
}
nav .content .list{
    text-align: right;    
}
nav .content .list ul.links li{
    display: inline-block;    
}
nav .content .list ul.links li a{
    color: #000;
    display: inline-block;
    padding: 27px 15px;
    font-size: 18px;
}
nav .content .list ul.links li a:hover{
    color: #ae9768;
    transition: all ease 0.3s;
}
nav .content .list ul.links li a.active{
    border-top: 3px solid #ae9768;
    color: #000;
}
/* menu */
nav .content .list .menu{
    display: none;
}
nav .content .list .menu i{
    color: #907855;
    font-size: 20px;
    padding: 27px 15px;    
    cursor: pointer;        
}
/* dropdown */
nav .content .list ul.links li.dropdown-menu{
    position: relative;
}
nav .content .list ul.dropdown{
    background-color: rgba(53, 51, 48, 0.8);
    position: absolute;    
    top: 78px;    
    width: 220px;
    z-index: 99;
    text-align: left;
    padding: 10px 0px;
    display: none;
    visibility: hidden;
}
nav .content .list ul.links li.dropdown-menu:hover ul.dropdown{
    display: block;
    visibility: visible;    
}
nav .content .list ul.dropdown li{
    display: block;
}
nav .content .list ul.dropdown li:hover{
    background-color: #ae9768;
    color: #000;
}
nav .content .list ul.dropdown li a{
    color: #fff;
    padding: 10px 15px;
    font-size: 15px;
}
nav .content .list ul.dropdown li a:hover{
    color: #fff;
    transform: translateX(-3px);
    transition: all ease-in-out 0.3s;
}

/* header */
header{
    height: 130vh;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../images/drew-coffman-1872.webp) no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
header .content p{
    font-size: 22px;
    width: 670px;
    line-height: 1.5;
}
header .content h1{
    font-size: 75px;
    font-weight: normal;
    margin: 15px 0px;    
}
header .content button{
    margin-top: 35px;
    padding: 15px 25px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
header .content button.learn{
    background-color: #ae9768;
    color: #fff;
    margin-right: 5px;
    border: 2px solid #ae9768;
}
header .content button.contact{
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}
header .content button:hover{
    background-color: #fff;
    color: #000;
    border: 2px solid #fff;
    transition: all ease-in-out 0.5s;
}

/* about */
.about,
.location,
.baking{
    margin: 100px 0px;
}
.about .content .photo,
.about .content .text,
.location .content .text,
.location .content .photo,
.contact .content .info,
.contact .content .map{
    float: left;
    width: 50%;
}
.about .content .photo img,
.location .content .photo img{
    width: 90%;
}
.about .content .text h2,
.location .content .text h2,
.baking .content .title h2,
.contact .content .info h2{
    font-size: 32px;
    font-weight: normal;
    margin-bottom: 25px;
}
.about .content .text p,
.location .content .text p,
.baking .content p,
.contact .content .info p{
    font-size: 17px;
    line-height: 2;
    color: #686868;
}
.about .content .text ul,
.contact .content .info ul{
    margin-top: 25px;
    list-style: none;
}
.about .content .text ul li,
.contact .content .info ul li{    
    padding: 15px 0px;
    font-size: 17px;
    color: #686868;
}
.about .content .text ul li i{
    color: #795548;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 20px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    margin-right: 15px;
}

/* location */
.location,
.contact{
    background-color: #F8F8F8;
    padding: 50px 0px;
}
.location .content .photo,
.contact .content .map{
    text-align: right;
}

/* baking */
.baking .content .title{
    text-align: center;
}
.baking .content .item{
    float: left;
    width: 33.33%;
    text-align: center;
    margin-top: 50px;
}
.baking .content .item img{
    width: 90%;
}
.baking .content .item h3{
    font-size: 20px;
    font-weight: normal;
    margin: 15px 0px;
    color: #686868;
}

/* contact */
.contact .content .info ul li i{
    color: #fff;    
    background-color: #795548;
    font-size: 17px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    margin-right: 15px;
}
.contact .content .map iframe{    
    border: none;
}

/* footer */
footer{
    background-color: #403D38;
    padding: 50px 0px;
}
footer .content .categories{
    float: left;
    width: 24%;
    margin: 0px 6px;
}
footer .content .categories h3{
    color: #fff;
    font-weight: normal;
    margin: 15px 0px;
}
footer .content .categories p,
footer .content .categories li{
    color: #969696;    
    line-height: 2;
}
footer .content .categories ul{
    list-style: none;
}
footer .content .categories li{
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
}
footer .content .categories li:last-child{
    border: none;
}
footer .content .categories li i{
    margin-right: 10px;
}

.foot{
    padding: 50px 0px;
    background-color: #353330;
    text-align: center;
}
.foot p{
    color: #969696;
    font-size: 15px;
    margin: 25px 0px;
}
.foot .social li{
    display: inline-block;
    margin: 0px 5px;
}
.foot .social li i{
    color: #969696;
    background-color: #484540;    
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
}
.foot .social li i:hover{
    color: #fff;
}
.foot .social li:nth-child(1):hover i{
    background-color: #4667AC;     
}
.foot .social li:nth-child(2):hover i{
    background-color: #E94540;    
}
.foot .social li:nth-child(3):hover i{
    background-color: #0074B0;
}
.foot .social li:nth-child(4):hover i{
    background-color: #34ABDA;
}

.top{
    position: fixed;
    bottom: 10px;
    right: 20px;    
}
.top i{
    color: #828180;
    background-color: #252422;
    border: 2px solid #828180;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
}

/* media */
@media screen and (max-width: 1109px){    
    nav .content .list ul.links{
        display: none;
    }
    nav .content .list .menu{
        display: block;
    }
    nav .content .list:hover ul.links{
        display: block;
    }                
    nav .content .list ul.links li{
        display: block;
    }
    nav .content .list ul.dropdown{
        width: 100%;        
    }
}
@media screen and (max-width: 991px){
    .about .content .photo,
    .about .content .text,
    .location .content .text,
    .location .content .photo,
    .baking .content .item,
    .contact .content .info,
    .contact .content .map,
    footer .content .categories{
        width: 100%;
    }
    .about .content .photo img,
    .location .content .photo img{
        width: 100%
    }
    .location .content .photo img{
        margin-top: 25px;
    }
    .about .content .text h2{
        margin-top: 25px;
    }
}
@media screen and (max-width: 768px){    
    header .content p{
        width: 100%;
        font-size: 20px;
    }
    header .content h1{
        font-size: 50px;        
    }
    header .content button{
        margin-top: 15px;
    }
    .baking .content .item{
        width: 100%;
    }
    .foot img{
        width: 50%;
    }
}