body {
    background-color: #C1B6AE;
    color: #20201A;
    box-sizing: border-box;
}

section{
    padding-top: 60px;
    padding-bottom: 60px;
}


button{
    display:flex;
    width: 120px;
    height:40px;
    margin-bottom: 25px;
    border-radius: 60px;
    justify-content:center;
    align-items: center;
}

nav ul li a{
    margin:auto 20px;
    text-transform: uppercase;
    text-align: center;
}

.navbar{
    width:100%;
    z-index:1000;
    position:fixed;
    background-color: #E9D9C7;
}

.navbar-brand {
    color: #825C42;
    font-family:Amoret,Cardo,Garamond,Garet Book; ;
    font-size:2rem;
    font-weight:600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.nav-item{
    color: #20201A;
    font-family: Montserrat,pontiac,munich,quicksand;
    cursor:pointer;
    transition: all 0.3s ease;
}

.cart{
    width:100%;
    height:auto;
    margin-left: 400px;
    
}

#category .card-title{
    cursor:pointer;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    font-weight: 600;
    line-height:1.5rem;
    text-transform:uppercase;
    text-align: center;
}

.banner-text{
    position:absolute;
    top:90%;
    left: 50%;
    color:#171a11;
    transform:translate(-50%,-50%);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:2.5rem;
    font-weight:600;
    letter-spacing: 1.5px;
    word-spacing: 2px;

}
.card-group{
    display:flex;
    align-items:stretch;
    gap:10px;
    border-color: #4F4832 2px;
}
.card-title{
    margin-top: 10px;
    font-family:Amoret,Cardo,Garamond,Garet Book;
    font-size:1.5rem;
    text-align: center;
    letter-spacing: 1px;
    color:#171a11;
}

.card{
    align-items: center;
    border-style: outset;
    border-color:#4F4832;
    border-width: 2px;
    background-color: #C1B6AE;
}
.card-img-top{
    width:100%;
    aspect-ratio: 1/1;
    object-fit:cover;
}
.card-body{
    color:#565653;
}

.container{
    display:grid;
    gap:1.5rem;
    text-align: center;
    letter-spacing: 2px;
    line-height: 1.5rem;
    word-spacing: 4px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#hero img {
    max-width: 100%;
    Height:auto;
    justify-content:flex-end;
    margin-top: 0;
    margin-bottom: 5px;
}

#hero p{
    font-size: 1.8rem;
    font-weight: 300;
    line-height:2.5px;
    letter-spacing: 1px;
}

#About h2{
    font-family:Amoret,Cardo,Garamond,Garet Book;
    font-size: 1.5rem;
    font-weight: 600;
    line-height:1.5rem;
    text-transform:uppercase;
    text-decoration: none;
    color:#474130;
    text-shadow: #20201A 1px 1px;
    cursor:pointer;
    transition: all 0.3s ease;
    margin-top: 5px;
}

#About p {
    font-size: 1.5rem;
    font-weight:200;
    color:#20201A;
    margin-bottom: 20px;
    line-height:1.5em;
    letter-spacing: 1px;
}

 h2{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 80px;
    font-family:Amoret,Cardo,Garamond,Garet Book;
    font-size: 2.5rem;
    font-weight: 600;
    line-height:1.5rem;
    text-transform: uppercase;
    color: #474130;
    text-shadow: 1px 1px#20201A;
    text-decoration: overline 5px #474130;
 }

.subtitle {
    color:#292E1E;
    text-transform: uppercase;
    text-shadow: 1px 1px #474130;
    font-family: Amoret,Cardo,Garamond,Garet Book;
    font-size:1.8rem;
    font-weight: 500;
    margin-bottom: 25px;
    margin-top: 5px;
}

.list {
    font-size: 1.5rem;
    font-weight:400;
    color:#20201A;
    margin-bottom: 20px;
    line-height:1.5em;
}

.card-link {
    margin-top: 20px;
    font-family:Amoret,Cardo,Garamond,Garet Book;
    font-size:1.5rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:#474130;
    text-decoration: underline 5px #474130;
}
    
h4{
    font-size:1.5rem;
    font-weight: 600;
    line-height:1.5rem;
    text-transform: uppercase;
    text-align: center;
    color:#474130;
}
.tbl {
    background-color:#B3A696;
    border-style: double;
    border-color: #20201A;
    padding: 8px;
    align-content: center;
    height: 50%;
    width:80%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 125px;
}

th {
    border:2px solid;
    background-color:#C1B6AE;
    font-size: 1rem;
    text-transform: capitalize;
    text-align: center;
}

td,tr {
  border:2px solid;
  border-color:#20201A;
}

.btn {
    border-style: outset;
    border-color:#20201A;
    border-width: 2px;
}

#form .content{
    min-height: 100vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

#form{
    height: 50%;
    width:80%;
    padding: 20px 60px 40px 40px;
    margin-top: 50px;
    margin-left: 125px;
    border-style: outset;
    border-color:#4F4832;
    border-width: 2px;
}



#form .content .form-box{
    width:100%;
    margin-left: 75px;
}
.content .form-box .topic-text{
    font-size: 1.5rem;
    font-weight: 500;
    line-height:1.5rem;
    text-transform: uppercase;
    color:#4F4832;
    margin-left: 150px;
}

.form-box .input-box{
    height:50px;
    width:100%;
    margin:12px 0;
    font-size: 1.5rem;
    font-weight:400;
    text-transform: uppercase;
    color:#4F4832;
}

.form-box .input-box textarea{
    height:100%;
    width:100%;
    font-size:16px;
    border-radius:6px;
    padding:0 15px;
}

.form-box .message-box{
    min-height:110px;
}
.form-box .button{
    margin-top:20px;
    display:inline-block;
}
.form-box .button input[type="button"]{
    font-size:18px;
    border-radius: 6px;
    padding:8px 16px;
    cursor:pointer;
    transition: all 0.3s ease;
}


#contacts{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    position:relative;
    margin-top: 20px;
    text-align: center;
}

.icon{
    width:100%;
    height:auto;
    cursor:pointer;
    transition: all 0.3s ease;
}

.topic{
    font-size:15px;
    font-weight: 500;
    text-transform: uppercase;
    color: #474130;
}
*{
    box-sizing: border-box;
}