* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body {
        background-color: #eacdbd;
       
    }

    /* header */

    .nav-container {
        display: flex;
        flex-direction: row;
        font-family: "Elms Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;

    }

    .right ul {
        display: flex;
        gap: 5rem;
        padding-top: 3rem;
        padding-left: 38rem;
    }

    .right ul li {

        list-style: none;
    }

    .right ul li a {
        text-decoration: none;
        color: black;
    }

    /* section-1 */

    .container1{
         width: 100vw;
        height: 100vh;
        background-image: url(./image/coffe.png);
        background-repeat: no-repeat;
        background-size: contain;
  

    }

    .container1-text{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 10rem;
        padding-top: 16rem;
    }

    .FRESHLY{
        font-size: 4rem;
        color: #948b78;
        font-weight: 100;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       
    }

    .COFFEE{
         font-size: 5rem;
        color: #ffd06b;
        font-weight: 900;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    .btn{
        width: 9rem;
        height: 3rem;
        border-radius: 10rem;
        border: none;
        font-size: medium;
        background-color: #eacdbd;
    }


  /* section-2 */

  .container2{
    text-align: center;
  }
  .top-categories1{
    display: flex;
  }
  .top-1 img{
    border-radius: 6rem;
    width: 80%;
 
  }

  .toptext1{
    font-family:Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 600;
    
  }

  .Explore1{
     font-family:Arial, Helvetica, sans-serif;
    font-size: large;
    font-weight: 400;
    word-spacing: 1px;
    
  }

  .container2-text{
    margin-bottom: 5rem;
  }

  .Mocha{
    font-family:Arial, Helvetica, sans-serif;
    font-size: x-large;
    font-weight: 400;
    margin: 1rem;
  }

  /* section -3 */
     
  /* .container3 {
    
     text-align: center;
  } */

  .container2-text{
    text-align: center;
  }
  .top-categories2{
      display: flex;
      gap: 2rem;
      justify-content: center;
  }

  .Mocha{
    text-align: center;
  }

    .toptext2{
    font-family:Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 600;
    
  }

  .Explore2{
     font-family:Arial, Helvetica, sans-serif;
    font-size: large;
    font-weight: 400;
    word-spacing: 1px;
    
  }

    .top-2{
        background-color: #d2b5a5;
        border-radius: 5rem;
        width: 30vw;    
    }
    .top-2 img{
        margin-left: 1%;
    }


    .before{
        background-color: #e2d7d2;
        width: 6rem;
        height: 2rem;
        text-align: center;
        border-radius: 5rem;
        padding: 1%;
        margin-top: 2rem;
        margin-left: 2rem;
    }

    .before p i{
        padding-right: 1rem;
    }

    .buy{
        padding: 5px;
        border-radius: 5rem;
        padding-left: 5px;
        padding-right: 5px;
        border: none;
        color: white;
        margin-left: 7rem;
        background-color:#42413f ;
        
    }

    .vish{
        text-align: center;
        padding-bottom: 2rem;
    }

    
   /* SECTION-4  */

   .container4{
     text-align: center;
     
  }
  .top-categories3{
      display: flex;
      gap: 2rem;
      justify-content: center;
  }

   .toptext3{
    font-family:Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: 600;
    margin-top: 9rem;
    
  }

  .Explore3{
     font-family:Arial, Helvetica, sans-serif;
    font-size: large;
    font-weight: 400;
    word-spacing: 1px;
    
  }

  .top-3{
        background-color: #d2b5a5;
        border-radius: 2rem;
        width: 30vw;    
    }

    .top-3 img{
        width: 30vw;
        border-radius: 2rem;
        padding: 1rem;
    }

    .container4-text-coffee{
        padding-left: 1rem;
    }

    .Connoisseur{
        font-size: x-large;
        font-weight: 600;
        text-align: start;
    }

    .lorem{
        text-align: start;
    }

    .book{
        padding: 10px;
        margin: 1rem;
        margin-right: 20rem;
        border: none;
        border-radius: 2rem;
        background-color: #96938c;
        color: white;
    }

    /* footer */

   .container4{
    padding-bottom: 4rem;
   }

    footer{
        background-color: #1e1e1e;
    }
/* 
    .footer-container{
        padding: 2rem;
    } */

    .footer-product{
        display: flex;
        justify-content: space-around;
        padding: 6rem;
        font-family:Arial, Helvetica, sans-serif;
    }

    .footer-product ul li{
        list-style: none;
        color: #e6decd;
    }

    .bold{
        color: rgb(255, 255, 255);
        gap: 1rem;
        font-size: larger;
        font-weight: 700;
          font-family:Arial, Helvetica, sans-serif;
          margin-bottom: 1rem;
    }

    .footer-button-part{
        display: flex;
        justify-content: center;
        gap: 3rem;
        color: #e2d7d2;
        background-color: #44423f;
        width: 70vw;
        padding: 1rem;
        margin-left: 11rem;
        font-family:Arial, Helvetica, sans-serif;
    }


@media (max-width:1400px){ 
     
    

        /* section-1 */

    .container1{
            width: 1407px;
            height: 100vh;
        background-image: url(./image/coffe.png);
      
    }

    /*  SECTION-4 */

    .book{
        width: 7rem;
    }

    .right ul{
         padding-left: 31rem;
    }
}

@media (max-width:1200px){ 
      


    .container1{
        width: 1200px;
        height: 80vh;
        background-image: url(./image/coffe.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .right ul {
        display: flex;
        gap: 5rem;
        padding-top: 3rem;
        padding-left: 18rem;
    }

    .container1-text{
        padding: 7rem;
        
    }

    .FRESHLY{
        font-size: 3rem;
    }

    .COFFEE{
        font-size: 3rem;
    }


}


@media (max-width:992px){
    
    .right ul {
   
        gap: 3rem;
        padding-top: 3rem;
        padding-left: 18rem;
    }

     .top-2{
        padding-bottom: 2rem;

     }

   .footer-button-part{
      margin-left: 9rem;
   } 

}

@media (max-width:768px){
       .right ul {
   
        gap: 2rem;
        padding-top: 3rem;
        padding-left: 9rem;
    }
          
    .container1-text{

        gap: 1rem;
        padding: 6rem;
        padding-top: 10rem;
    }

    .FRESHLY{
        font-size: 3rem;
        
       
    }

    .COFFEE{
         font-size: 2rem;
        color: #ffd06b;
      
    }

     .btn{
        width: 7rem;
        height: 2rem;
        border-radius: 10rem;
        border: none;
        font-size: medium;
        background-color: #eacdbd;
    }

    .top-categories2{
     display: grid;
     grid-template-columns: repeat(1,2fr);
    }

    .top-2{
        margin-left: 5rem;
        width: 70vw;
        text-align: center;
        margin-left: 8rem;
    }

    .vish{
        font-size: xx-large;
    }

    .buy{
        padding: 1rem;
    }

    .footer-button-part{
           width: 80vw;
         margin-left: 5rem;
         gap: 2rem;
    }

}

@media  (max-width:576px){
   .right{
    display: none;
   }

   
    .container1{
          width: 100%;
            height: 40vh;
        background-image: url(./image/coffe.png);
        background-repeat: no-repeat;
        background-size: contain;
  

    }


      .container1-text{
       padding-top: 5rem;
       padding-left: 2rem;

      }

      .FRESHLY{
        font-size: xx-large;
      }

      .Mocha{
        font-size: large;
      }

      .top-2{
         margin-left: 6rem;
      }


   .top-categories3{
    display: flex;
    flex-direction: column;
    justify-content: center;
   }

   .top-3{
    width: 100vw;
    height: 70vh;
   }

   .top-3 img{
     width: 100vw;
   }
    
   .footer-product{
    display: grid;
    grid-template-columns: repeat(2,2fr);
    gap: 5rem;
    padding-left: 10rem;
   }
     
  
    
}

@media (max-width:400px){
    .container1-text{
        padding-top: 3rem;
       padding-left: 2rem;
      
    }

    .FRESHLY{
        font-size: x-large;
    }

    .COFFEE{
       font-size: large;
    }

     .container1{
          width: 100%;
            height: 30vh;
        background-image: url(./image/coffe.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

   .top-2{
         margin-left: 4rem;
      }

      .footer-product{
        grid-template-columns: repeat(1,1fr);
         padding-left: 10rem;
      }

      .footer-button-part{
        margin-left: 3rem;
      }

      .top-3 img{
        margin-left: 2rem;
      }

}