*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.03em;
}

.main-container
{
    width: 1300px;
    margin: auto;
}

/* header section */
.coffee img
{
    width: 100%;
    height: 795px;
}

header
{
    top: 0;
    position: fixed;
    display: flex;
    width: 1300px;
    z-index: 1;
}

.sticky
{
    position: fixed;
    top: 0;
    background-color: #7D0C0C;
}

.logo img
{
    width: 60px;
    height: 50px;
    margin-left: 56px;
    margin-top: 49px;
    margin-bottom: 48px;
}

.nav-bar
{
margin-left: 165px;
margin-top: 63px;
margin-bottom: 62px;
}

.nav-bar a
{
    font-size: 18px;
    font-weight: bold;
    color: #06F7E8;
    text-decoration: none;
    letter-spacing: 0.01em;
    margin-right: 52px;
}

.nav-bar a:hover
{
    font-size: 18.1px;
    transition: .1s;
}

.overlay
{
    display: none;
}

.sm-bar {display: none;}

/* home page */
.home-page h1 
{
   position: absolute;
   width: 588px;
   height: 171px;
   left: 262px;
   top: 310px;
   font-size: 48px;
   line-height: 56px;
   text-align: center;
   letter-spacing: 0.01em;
   color: #FFFFFF;
}

.home-page button
{
    position: absolute;
    width: 177px;
    height: 45px;
    top: 541px;
    border: 1px solid #06F7E8;
    font-size: 24px;
    color: #06F7E8;
    background: none;
    outline: none;
    cursor: pointer;
}

.home-page button:nth-child(2)
{
    left: 358px;
}

.home-page button:last-child
{
    left: 577px;
}

.home-page button:hover
{
    font-size: 24.1px;
    transition: .1s;
}

/* about page */
.about-page
{
    display: flex;
    flex-direction: column; 
    height: 887px;
    margin-top: -15px;
    background: #F1EEE3;
}

.about-page h2
{
    font-size: 30px;
    text-align: center;
    margin-top: 70px;
    letter-spacing: 0.01em;
}

.about-page u, .prod-range u 
{
    color: #7D0C0C;
}

.about-page img
{
    width: 392px;
    height: 545px;
    margin-left: 107px;
    margin-top: 115px;
}

.about-page h3
{
    font-size: 24px;
    margin-left: 634px;
    margin-top: -610px;
    margin-bottom: 45px;
}

.about-page p
{
    width: 569px;
    height: 212px;
    margin-left: 634px;
    font-size: 18px;
    line-height: 40px;
}

.about-page h4
{
    width: 446px;
    height: 102px;
    margin-left: 635px;
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 0.01em;
}

.about-page h5
{
    width: 44px;
    height: 55px;
    margin-left: 585px;
    margin-top: -80px;
    font-size: 50px;
    line-height: 40px;
    letter-spacing: 0.01em;
    color: #7D0C0C;
    transform: rotate(-180deg);
}

/* about page in mobile  */
.M-about{display: none;}

/* product range section */
.Mprod-range{display: none;}
.prod-range
{
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}
.prod-range h2
{
    text-align: center;
    font-size: 30px;
    margin-top: 70px;
    margin-bottom: 180px;
}

.cof-bean
{
    display: flex;
    justify-content: space-evenly;
}

.cof-bean img
{
    width: 333px;
    height: 342px;
    border-radius: 128px;
    opacity: 30%;
}

.cof-bag
{
    display: flex;
    top: 1815px;
    position: absolute;
}

.cof-bag img
{
    position: absolute;
    width: 226px;
    height: 398px;
}

.cof-bag img:first-child
{
    left: 126px;
}

.cof-bag img:nth-child(2)
{
    left: 535px;
}

.cof-bag img:last-child
{
    left: 945px;
}

.pr-cnt
{
    display: flex;
}

.prcnt-child
{
    margin-top: 20px;
}

.prcnt-child h3
{
    height: 35px;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
}

.prcnt-child p
{
    width: 350px;
    height: 28px;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
}

.prcnt-child:first-child
{
    margin: 20px 68px 0 55px;
}

.prcnt-child:nth-child(2)
{
    margin-right: 68px;
}

/* best coffee section */
.cof-best
{
    display: flex;
    flex-direction: column;
    background: #F1EEE3;
    height: 725px;
}

.cof-best h2
{
    font-size: 30px;
    margin-top: 68px;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.cof-best h3
{
    font-size: 24px;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.cof-best p
{
    font-size: 20px;
    width: 883px;
    height: 128px;
    margin-left: 215px;
    line-height: 40px;
}

.cof-best-img
{
    display: flex;
    justify-content: center;
}

.cof-best-img img
{
    width: 301px;
    height: 309px;
}

/* smooth taste section */
.smooth
{
    display: flex;
    justify-content: space-evenly;
}

.sth-child
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px 0;
}

.sth-child svg
{
    margin-left: -9px;
}

.sth-child h2
{
    width: 210px;
    height: 40px;
    font-size: 30px;
    line-height: 40px;
    margin-top: 8px;
}

.sth-child h4
{
    width: 228px;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    color: #7D0C0C;
}

.sth-child p
{
    width: 333px;
    height: 107px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}

/* client review and slider */
.clnt-rev
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1205px;
    height: 566px;
    margin:  auto;
    border: 5px solid #7D0C0C;
}

.clnt-rev img:first-child
{
    width: 154px;
    height: 150px;
    border-radius: 126px;
    margin: 35px 0 15px;
}

.clnt-rev p
{
    width: 600px;
    height: 106px;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
}

.rev-star
{
    display: flex;
}

.rev-star svg
{
    margin: -15px 0 15px 25px;
}

.clnt-rev h2
{
    width: 387px;
    height: 48px;
    font-size: 30px;
    line-height: 35px;
    letter-spacing: 0.01em;
    text-align: center;
    margin-left: 15px;
}

.clnt-rev img:last-child
{
    width: 253px;
    height: 205px;
    margin-bottom: -50px;
}

/* product page  */
.product
{
    display: flex;
    flex-direction: column;
}

.product h2
{
    font-size: 30px;
    margin-top: 100px;
    margin-bottom: 50px;
    text-align: center;
}

.product u
{
    color: #7D0C0C;
}

.prd-img-cont
{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 50px;
}

.prod-img
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prod-img img
{
    width: 256px;
    height: 412px;
}

.prod-img h3
{
    font-size: 24px;
    margin: 15px 0 10px;
}

.prod-img h4
{
    font-size: 30px;
    color: #7D0C0C;
    margin: 10px 0;
}

.prod-img button
{
    background: #7D0C0C;
    width: 180px;
    height: 46px;
    line-height: 46px;
    border: none;
    outline: none;
    font-size: 18px;
    color: #FFFFFF;
    cursor: pointer;
}

.prod-img button:hover
{
    font-size: 18.1px;
    transition: .1s;
}

/* contact page */
.contact
{
    height: 650px;
    background: #F1EEE3;
    display: flex;
    flex-direction: column;
}

.contact h2
{
    margin: 50px 0 12px;
    font-size: 30px;
    text-align: center;
}

.contact p
{
    font-size: 24px;
    text-align: center;
    margin-bottom: 70px;
}

.nm-em
{
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
}

.nm-em input
{
    width: 406px;
    height: 58px;
    background: #FFFFFF;
    border: none;
    text-align: center;
    font-size: 18px;
    outline: none;
}

.nm-em input:first-child
{
    margin-right: 35px;
}

.msg-sbm
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.msg-sbm input:first-child
{
    width: 303px;
    height: 182px;
    font-size: 18px;
    border: none;
    background: #FFFFFF;
    outline: none;
    text-align: center;
    margin-bottom: 30px;
}

.msg-sbm input:last-child
{
    width: 158px;
    height: 44px;
    font-size: 20px;
    background: #7D0C0C;
    color: white;
    border: none;
    outline: none;
}

.msg-sbm input:last-child:hover
{
    font-size: 20.1px;
    transition: .1s;
}

/* footer section */
footer
{
    height: 124px;
    background: #7D0C0C;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer p:first-child
{
    font-size: 20px;
    color: #FFFFFF;
}

footer p:last-child
{
    font-size: 20px;
    color: #FFFFFF;
    margin-top: 8px;
}

/* tab style here */
@media screen and (max-width:768px)
{
    .main-container
{
    width: 768px;
}

/* header section */
.coffee img
{
    width: 100%;
    height: 500px;
}

header
{
    width: 768px;
}

.logo img
{
    margin-left: 30px;
    margin-top: 29px;
    margin-bottom: 29px;
}

.nav-bar
{
    display: none;   
}

.overlay {
    display: flex;
    height: 0%;
    width: 768px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    opacity: 99%;
    overflow-y: hidden;
    transition: 0.5s;
  }  

.overlay .closebtn {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 40px;
    text-decoration: none;
  }

  .overlay-content {
    position: relative;
    top: 10%;
    width: 768px;
    text-align: center;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
  }

  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 30px;
    color: white;
    transition: 0.3s;
  }

  .overlay a:hover {
    color: #f1f1f1;
  }

  .mb-link {display: none;}

  .sm-bar 
  {
      display: flex;
      font-size:30px;
      cursor:pointer; 
      left: 710px;
      top: 30px;
      position: absolute;
      color: #06F7E8;
  }

/* home page */
.home-page h1 
{
   width: 419px;
   height: 151px;
   left: 88px;
   top: 205px;
   font-size: 40px;
   line-height: 47px;
}

.home-page button
{
    width: 157px;
    top: 369px;
}

.home-page button:nth-child(2)
{
    left: 137px;
}

.home-page button:last-child
{
    left: 315px;
}

/* about page */
.about-page
{
    height: 680px;
}

.about-page h2
{
    margin-top: 40px;
}

.about-page img
{
    width: 255px;
    height: 410px;
    margin-top: 87px;
    margin-left: 20px;
}

.about-page h3
{
    margin-left: 310px;
    margin-top: -470px;
}

.about-page p
{
    width: 445px;
    height: 149px;
    margin-left: 310px;
    line-height: 30px;
    text-align: left;
    margin-top: -24px;
    margin-bottom: 70px;
}

.about-page h4
{
    margin-left: 315px;
    margin-top: -60px;
}

.about-page h5
{
    margin-left: 270px;
}

/* about page in mobile  */
.M-about{display: none;}

/* product range section */
.Mprod-range{display: none;}
.prod-range h2
{
    margin-top: 30px;
    margin-bottom: 110px;
}

.cof-bean img
{
    width: 201px;
    height: 213px;
    border-radius: 90px;
}

.cof-bag
{
    top: 1290px;
    position: absolute;
}

.cof-bag img
{
    width: 137px;
    height: 224px;
}

.cof-bag img:first-child
{
    left: 72px;
}

.cof-bag img:nth-child(2)
{
    left: 315px;
}

.cof-bag img:last-child
{
    left: 558px;
}

.prcnt-child
{
    margin-top: 15px;
}

.prcnt-child h3
{
    height: 28px;
    font-size: 24px;
    line-height: 28px;
    
}

.prcnt-child p
{
    width: 160px;
    height: 48px;
    font-size: 20px;
    line-height: 23px;
    
}

.prcnt-child:first-child
{
    margin: 20px 85px 0 55px;
}

.prcnt-child:nth-child(2)
{
    margin-right: 85px;
}

/* best coffee section */
.cof-best
{
    height: 570px;
}

.cof-best h2
{
    font-size: 24px;
    margin-top: 35px;
}

.cof-best h3
{
    font-size: 20px;
}

.cof-best p
{
    font-size: 18px;
    width: 625px;
    height: 110px;
    line-height: 30px;
    text-align: center;
    margin-left: 65px;
}

.cof-best-img img
{
    width: 164px;
    height: 215px;
    margin-top: 30px;
}

/* smooth taste section */
.sth-child
{
    margin: 40px 0;
}

.sth-child h2
{
    width: 157px;
    font-size: 24px;
    line-height: 30px;
}

.sth-child h4
{
    width: 198px;
    font-size: 20px;
    line-height: 15px;
}

.sth-child p
{
    width: 206px;
    height: 130px;
    font-size: 18px;
    margin-top: -15px;
    margin-bottom: 8px;
}

/* client review and slider */
.clnt-rev
{
    width: 705px;
    height: 506px;
}

.clnt-rev img:first-child
{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30px 0 15px;
}

.clnt-rev p
{
    width: 596px;
    height: 83px;
    line-height: 30px;
}

.rev-star svg
{
    margin: 15px 0 15px 25px;
}

.clnt-rev img:last-child
{
    margin-top: 10px;
}

/* product page  */
.product h2
{
    margin-top: 80px;
}

.prd-img-cont
{
    margin-bottom: 70px;
}

.prod-img img
{
    width: 165px;
    height: 214px;
}

.prod-img h3
{
    font-size: 22px;
}

.prod-img button
{
    width: 164px;
}

/* contact page */
.contact
{
    height: 480px;
}

form
{
    display: flex;
    justify-content: space-evenly;
}

.nm-em
{
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.nm-em input
{
    width: 340px;
}

.nm-em input:first-child
{
    margin-bottom: 25px;
    margin-right: 0px;
}

.msg-sbm input:first-child
{
    width: 335px;
    height: 141px;
    margin-bottom: 25px;
}

.msg-sbm input:last-child
{
    margin-left: -370px;
}

}



/* mobile style here */
@media screen and (max-width:375px)
{
    .main-container
    {
        width: 375px;
        margin: auto;
    }
    
    /* header section */
    .coffee img
    {
        width: 375px;
        height: 245px;
    }
    
    header
    {
        width: 375px;
    }
    
    .logo img
    {
        width: 50px;
        height: 40px;
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .nav-bar
    {
        display: none;   
    }
    
    .overlay {
        display: flex;
        height: 0%;
        width: 375px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.9);
        overflow-y: hidden;
        transition: 0.5s;
      }  
    
    .overlay .closebtn {
        position: absolute;
        top: 25px;
        right: 35px;
        font-size: 40px;
        text-decoration: none;
      }
    
      .overlay-content {
        position: relative;
        top: 8%;
        width: 375px;
        text-align: center;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
      }
    
      .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 30px;
        color: #818181;
        transition: 0.3s;
      }
    
      .overlay a:hover {
        color: #f1f1f1;
      }

      .tb-link {display: none;}
      .mb-link{display: block;}
    
      .sm-bar 
      {
        display: flex;
        left: 330px;
        top: 18px;
    }
    
    /* home page */
    .home-page h1 
    {
        width: 278px;
        height: 112px;
        left: 45px;
        top: 88px;
        font-size: 24px;
        line-height: 28px;
        text-align: center;
        letter-spacing: 0.01em;
        color: #FFFFFF;
    }
    
    .home-page button
    {
        width: 111px;
        height: 31px;
        top: 185px;
        font-size: 18px;
    }
    
    .home-page button:nth-child(2)
    {
        left: 65px;
    }
    
    .home-page button:last-child
    {
        left: 190px;
    }
    
    /* about page */
    .about-page
    {
        display: none;
    }

    .M-about
    {
       display: flex;
       flex-direction: column;  
       width: 375px;
       height: 1038px;
       background: #F1EEE3;
       margin-top: -15px;
    }

    .M-about h2
    {
        font-size: 20px;
        text-align: center;
        letter-spacing: 0.01em;
        margin-top: 35px;
    }

    .M-about u
    {
        color: #7D0C0C;
    }

    .M-about h3
    {
        font-size: 18px;
        text-align: center;
        margin: 10px 0 15px;
    }

    .M-about p
    {
        width: 285px;
        height: 225px;
        font-size: 15px;
        line-height: 30px;
        margin-left: 40px;
    }

    .M-about h4
    {
        width: 211px;
        height: 138px;
        font-size: 22px;
        line-height: 30px;
        text-align: center;
        letter-spacing: 0.01em;
        margin: 15px 0 0px 50px;
    }

    .M-about h5
    {
        font-size: 50px;
        letter-spacing: 0.01em;
        color: #7D0C0C;
        margin-right:305px;
        margin-top: -105px;
        margin-bottom: 40px;
        transform: rotate(-180deg);
    }

    .M-about img
    {
        width: 250px;
        height: 266px;
        margin-left: 50px;
    }
    
    /* product range section */
    .prod-range {display: none;}

    /* product range section in mobile */
    .Mprod-range
    {
        display: flex;
        flex-direction: column;
        width: 375px;
    }

    .Mprod-range h2
    {
        text-align: center;
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 120px;
    }

    .Mprod-range u
    {
        color: #7D0C0C;
    }

    .Mcof-bean img:first-child
    {
        width: 229px;
        height: 213px;
        opacity: 30%;
        border-radius: 90px;
        margin-left: 70px;
    }

    .mvs{display: none;}

   .Mcof-bean h3
   {
       font-size: 24px;
       text-align: center;
       margin: 10px 0 5px;
   }

   .Mcof-bean p
   {
        width: 180px;
        font-size: 20px;
        text-align: center;
        margin: 0 0 120px 98px;
   }
    
    /* best coffee section */
    .cof-best
    {
        height: 580px;
        width: 375px;
    }
    
    .cof-best h2
    {
        width: 275px;
        height: 70px;
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        margin-left: 50px;
        margin-top: 30px;
    }
    
    .cof-best h3
    {
        width: 232px;
        height: 65px;
        margin-left: 70px;
        font-size: 20px;
        line-height: 28px;
        text-align: center;
    }
    
    .cof-best p
    {
        width: 298px;
        height: 237px;
        margin-left: 35px;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
    }
    
    .cof-best-img img
    {
        width: 80px;
        height: 150px;
        margin-top: -25px;
    }
    
    /* smooth taste section */
    .smooth
    {
        display: flex;
        flex-direction: column;
        width: 375px;
    }
    .sth-child
    {
        margin: 40px 0;
    }
    
    .sth-child h2
    {
        width: 157px;
        font-size: 24px;
        line-height: 30px;
    }
    
    .sth-child h4
    {
        width: 210px;
        font-size: 20px;
        line-height: 15px;
    }
    
    .sth-child p
    {
        width: 259px;
        height: 102px;
        margin-left: 10px;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
    }

    .sth-child:nth-child(2){margin-top: -25px;}

    .sth-child:last-child{margin-top: -25px;}
    
    /* client review and slider */
    .slider-container{width: 375px;}
    .clnt-rev
    {
        width: 320px;
        height: 506px;
        border: 5px solid #7D0C0C;
    }
    
    .clnt-rev img:first-child
    {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 25px 0 10px;
    }
    
    .clnt-rev p
    {
        width: 298px;
        height: 150px;
        margin-left: 11px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }
    
    .rev-star svg
    {
        margin: 10px 0 12px 15px;
    }

    .clnt-rev h2
    {
        width: 300px;
        height: 30px;
        font-size: 24px;
        margin-left: 5px;
        line-height: 28px;
        text-align: center;
        letter-spacing: 0.01em;
    }
    
    .clnt-rev img:last-child
    {
        margin-top: 10px;
    }
    
    /* product page  */
    .product{width: 375px;}
    .product h2
    {
        margin-top: 80px;
        margin-left: -5px;
    }
    
    .prd-img-cont
    {
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
    }
    
    .prod-img img
    {
        width: 195px;
        height: 263px;
    }
    
    .prod-img h3
    {
        font-size: 22px;
    }
    
    .prod-img button
    {
        width: 164px;
        margin-bottom: 30px;
    }
    
    /* contact page */
    .contact
    {
        width: 375px;
        height: 584px;
    }

    .contact h2
    {
        font-size: 30px;
        line-height: 40px;
        margin-top: 30px;
    }

    .contact p
    {
        width: 302px;
        height: 65px;
        left: 9px;
        font-size: 22px;
        margin-left: 35px;
        margin-bottom: 30px;
    }
    
    form
    {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    
    .nm-em
    {
        display: flex;
        flex-direction: column;
        justify-content: start;
    }
    
    .nm-em input
    {
        width: 293px;
        height: 58px;
        margin-left: 40px;
    }
    
    .msg-sbm input:first-child
    {
        width: 293px;
        height: 141px;
        margin-left: -1px;
        margin-bottom: 25px;
        margin-top: -5px;
    }
    
    .msg-sbm input:last-child
    {
        margin-left: 10px;
    }

    /* footer section */
    footer
    {
        width: 375px;
        height: 100px;
    }

}


/* mobile style here */
@media screen and (max-width:320px)
{
    .main-container
    {
        width: 320px;
        margin: auto;
    }
    
    /* header section */
    .coffee img
    {
        width: 320px;
        height: 245px;
    }
    
    header
    {
        width: 320px;
    }

    
    .logo img
    {
        width: 50px;
        height: 40px;
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .nav-bar
    {
        display: none;   
    }
    
    .overlay {
        display: flex;
        height: 0%;
        width: 320px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.9);
        overflow-y: hidden;
        transition: 0.5s;
      }  
    
    .overlay .closebtn {
        position: absolute;
        top: 25px;
        right: 35px;
        font-size: 40px;
        text-decoration: none;
      }
    
      .overlay-content {
        position: relative;
        top: 8%;
        width: 320px;
        text-align: center;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
      }
    
      .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 30px;
        color: #818181;
        transition: 0.3s;
      }
    
      .overlay a:hover {
        color: #f1f1f1;
      }

      .tb-link {display: none;}
      .mb-link{display: block;}
    
      .sm-bar 
      {
        display: flex;
        left: 275px;
        top: 18px;
    }
    
    /* home page */
    .home-page h1 
    {
        width: 278px;
        height: 112px;
        left: 20px;
        top: 88px;
        font-size: 24px;
        line-height: 28px;
        text-align: center;
        letter-spacing: 0.01em;
        color: #FFFFFF;
    }
    
    .home-page button
    {
        width: 111px;
        height: 31px;
        top: 185px;
        font-size: 18px;
    }
    
    .home-page button:nth-child(2)
    {
        left: 44px;
    }
    
    .home-page button:last-child
    {
        left: 168px;
    }
    
    /* about page */
    .about-page
    {
        display: none;
    }

    .M-about
    {
       display: flex;
       flex-direction: column;  
       width: 320px;
       height: 1038px;
       background: #F1EEE3;
       margin-top: -15px;
    }

    .M-about h2
    {
        font-size: 20px;
        text-align: center;
        letter-spacing: 0.01em;
        margin-top: 35px;
    }

    .M-about u
    {
        color: #7D0C0C;
    }

    .M-about h3
    {
        font-size: 18px;
        text-align: center;
        margin: 10px 0 15px;
    }

    .M-about p
    {
        width: 285px;
        height: 225px;
        font-size: 15px;
        line-height: 30px;
        margin-left: 17px;
    }

    .M-about h4
    {
        width: 211px;
        height: 138px;
        font-size: 22px;
        line-height: 30px;
        text-align: center;
        letter-spacing: 0.01em;
        margin: 15px 0 0px 50px;
    }

    .M-about h5
    {
        font-size: 50px;
        letter-spacing: 0.01em;
        color: #7D0C0C;
        margin-right:280px;
        margin-top: -105px;
        margin-bottom: 40px;
        transform: rotate(-180deg);
    }

    .M-about img
    {
        width: 222px;
        height: 266px;
        margin-left: 50px;
    }
    
    /* product range section */
    .prod-range {display: none;}

    /* product range section in mobile */
    .Mprod-range
    {
        display: flex;
        flex-direction: column;
        width: 320px;
    }

    .Mprod-range h2
    {
        text-align: center;
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 120px;
    }

    .Mprod-range u
    {
        color: #7D0C0C;
    }

    .Mcof-bean img:first-child
    {
        width: 229px;
        height: 213px;
        opacity: 30%;
        border-radius: 90px;
        margin-left: 45px;
    }

    .mms{display: none;}
    .mvs{display: flex;}

   .Mcof-bean h3
   {
       font-size: 24px;
       text-align: center;
       margin: 10px 0 5px;
   }

   .Mcof-bean p
   {
        width: 180px;
        font-size: 20px;
        text-align: center;
        margin: 0 0 120px 70px;
   }
    
    /* best coffee section */
    .cof-best
    {
        height: 580px;
        width: 320px;
    }
    
    .cof-best h2
    {
        width: 275px;
        height: 70px;
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        margin-left: 23px;
        margin-top: 30px;
    }
    
    .cof-best h3
    {
        width: 232px;
        height: 65px;
        margin-left: 44px;
        font-size: 20px;
        line-height: 28px;
        text-align: center;
    }
    
    .cof-best p
    {
        width: 298px;
        height: 237px;
        margin-left: 11px;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
    }
    
    .cof-best-img img
    {
        width: 80px;
        height: 150px;
        margin-top: -25px;
    }
    
    /* smooth taste section */
    .smooth
    {
        display: flex;
        flex-direction: column;
        width: 320px;
    }
    .sth-child
    {
        margin: 40px 0;
    }
    
    .sth-child h2
    {
        width: 157px;
        font-size: 24px;
        line-height: 30px;
    }
    
    .sth-child h4
    {
        width: 198px;
        font-size: 20px;
        line-height: 15px;
    }
    
    .sth-child p
    {
        width: 259px;
        height: 102px;
        margin-left: 8px;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
    }

    .sth-child:nth-child(2){margin-top: -25px;}

    .sth-child:last-child{margin-top: -25px;}
    
    /* client review and slider */
    .slider-container{width: 320px;margin: auto;}
    .clnt-rev
    {
        width: 300px;
        height: 506px;
        border: 5px solid #7D0C0C;
    }
    
    .clnt-rev img:first-child
    {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 25px 0 10px;
    }
    
    .clnt-rev p
    {
        width: 298px;
        height: 150px;
        margin-left: 11px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
    }
    
    .rev-star svg
    {
        margin: 10px 0 12px 15px;
    }

    .clnt-rev h2
    {
        width: 300px;
        height: 30px;
        font-size: 24px;
        margin-left: 5px;
        line-height: 28px;
        text-align: center;
        letter-spacing: 0.01em;
    }
    
    .clnt-rev img:last-child
    {
        margin-top: 10px;
    }
    
    /* product page  */
    .product{width: 320px;}
    .product h2
    {
        margin-top: 80px;
        margin-left: -5px;
    }
    
    .prd-img-cont
    {
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
    }
    
    .prod-img img
    {
        width: 195px;
        height: 263px;
    }
    
    .prod-img h3
    {
        font-size: 22px;
    }
    
    .prod-img button
    {
        width: 164px;
        margin-bottom: 30px;
    }
    
    /* contact page */
    .contact
    {
        height: 584px;
        width: 320px;
    }

    .contact h2
    {
        font-size: 30px;
        line-height: 40px;
        margin-top: 30px;
    }

    .contact p
    {
        width: 302px;
        height: 65px;
        left: 9px;
        font-size: 22px;
        margin-left: 10px;
        margin-bottom: 30px;
    }
    
    form
    {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    
    .nm-em
    {
        display: flex;
        flex-direction: column;
        justify-content: start;
    }
    
    .nm-em input
    {
        width: 285px;
        height: 58px;
        margin-left: 15px;
    }
    
    .msg-sbm input:first-child
    {
        width: 285px;
        height: 141px;
        margin-right: 10px;
        margin-bottom: 25px;
        margin-top: -5px;
    }
    
    .msg-sbm input:last-child
    {
        margin-left: 10px;
    }

    /* footer section */
    footer
    {
        width: 320px;
        height: 100px;
    }

}