body{
    margin: 0;
    padding: 0;
    background: url(/images/bg\ coffee.jpg)no-repeat;
    background-attachment: fixed;
}

/*header section*/

/*section1*/
.section1{
    margin-top: 5%;
    margin-bottom: 5%;
    color: #e6a756;
}
.section1 h1{
    color: #e6a756;
}
.section1 .ph3{
    font: lighter;
    font-weight: lighter;
}
/*section1*/

/*section2*/
.section2 .navbar-brand{
    color: #e6a756;
}
.section2 .fa-solid{
    color: white !important;
}
.section2{
    background: rgba(34, 20, 11, 0.938);
    padding-top: 2%;
    padding-bottom: 2%;
}
.section2 .collapse .nav-link{
    font-weight: bold;
    color: white !important;
    font-size: 1rem;
}
/*section2*/

/*header section*/

/*==================================Main section===============================*/

/*section3*/
.section3{
    margin-top: 5%;
    margin-bottom: 5%;
}
.section3 .container img{
    width: 100%;
}
.section3 .container .A{
    background: rgba(216, 201, 201, 0.986);
    width: 100%;
    padding: 5%;
    margin-top: 2%;
}
.section3 .container .A button{
    background: #e6a756;
    font-size: 15px;
}

/*section3*/

@media  screen and (min-width: 150px) and (max-width: 900px){
    .section1{
        visibility: hidden;
        display: none;
    }
    .section3 .container img{
        width: 100%;
    }
    .section3 .container .A{
        background: rgba(216, 201, 201, 0.986);
        width: 100%;
        padding: 5%;
        margin-top: 5%;
    }
}

@media  screen and (min-width: 901px) and (max-width: 1200px){
    .section1{
        visibility: visible;
    }
    .section3 .container img{
        width: 100%;
    }
    .section3 .container .A{
        background: rgba(216, 201, 201, 0.986);
        width: 100%;
        padding: 5%;
        margin-top: 5%;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1900px){
    .container{
        position: relative;
    }
    .section3 .container img{
        width: 75%;
        position: relative;
        left: 25%;
    }
    .section3 .container .A{
        background: rgba(216, 201, 201, 0.986);
        width: 50%;
        position: absolute;
        bottom: 10%;
        padding: 5%;
        margin-top: 2%;
    }
    .section3 .container .A button{
        background: #e6a756;
        font-size: 20px;
        position: relative;
        top: 90px;
    }
}
/*section4*/
.section4{
    padding-top: 5%;
    padding-bottom: 5%;
    margin-bottom: 5%;
    background: #e6a856da;
}
.section4 .B1{
    border: 2px solid rgba(245, 245, 233, 0.596) ;
    border-radius: 10px;
    padding: 1%;
    box-shadow: border-box;
}
.section4 .B2{
    background: rgba(216, 201, 201, 0.986);
}
/*section4*/

/*======================================footer section====================================*/

/*section5*/
.section5{
    padding-top: 4%;
    padding-bottom: 3%;
    background: rgba(34, 20, 11, 0.938);
}
.section5 p{
    font-size: 15px;
}
/*section5*/