* {
    margin: 0;
    padding: 0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box;
overflow-x: hidden;
max-width: 100%;
}



.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgb(110, 122, 169), rgba(26, 43, 106, 0)),url(6.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}

nav img {
    width: 200px;
    background: transparent;
   
}

.nav-links{     
        flex: 1;
        text-align: right;
        font-size: 2.8rem;
    }

   
    
.nav-links ul li {
    list-style: none;
    display: inline-block;
   padding: 8px 12px;
   position: relative;
}

.nav-links ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
}

.nav-links ul li::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #532703;
    display: block;
    margin: auto;
    transition: 1s;
}

.nav-links ul li:hover::after {
    width: 100%;
}




.text-box {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.text-box h1 {
    font-size: 2.8rem;
    font-weight: 400;

}

.text-box p {
    position: relative;
    margin: 10px 0 40px;
    font-size: 15px;
    color: #fff;
}

.coffee-beans {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #ffffff;
    padding: 12px 34px;
    font-size: 13px;
    background: #541b04;
    position: relative;
    cursor: pointer;
    
}

.coffee-beans:hover {
    border: 1px solid #c42f14;
    background: linear-gradient(270deg,#972708, #421403);
    transition: 1s;
}

nav .fa-solid {
    display: none;
    color: #fff;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
    
}

@media(max-width: 400px) {
    .text-box h1 {
        font-size: 1.5rem;
    }
    .nav-links ul li {
        display: block;
    }


    .nav-links p {
        font-size: .6rem;
        margin: 20px;
        padding-top: 20px;
        
    }
   
    .nav-links {
        display: none; /* 🔧 Add this */
        position: absolute;
        background: linear-gradient(270deg,#9d1604,#2f1201);
        height: 100vh;
        width: 200px;
        top: 0;
        right: 0;
        text-align: left;
        z-index: 2;
        
      }
      

    nav .fa-solid {
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-active {
        display: block !important; /* show it when active */
      }
}

   


    .nav-links ul {
        padding: 30px;
    }



@media (max-width: 700px) {
  .contact-container {
    padding: 0 10px;
    width: 100%;
  }
}

/*------menu-----*/
.menu {
    width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
    background: linear-gradient(#f1bbbb, #7f7272);
    background-color:  rgb(224, 220, 221);
}

h1 {
    text-align: center;
    font-size: 2rem;
    font-weight: 200;
    color: #3d0703;
}

h2 {
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
    color: #6d1610;
}

h3 {
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
    color: #431916;
    
}

li {
    text-align: center;
    font-size: 15px;
    font-weight: 100;
    color: #3f3636; 
}

p {
    text-align: center;
    color: #2a2525;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;

}
strong {
    color: #21070589;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
.row {
    margin-top: 5%;
    display: flex;
    justify-content: space-evenly;
}

.coffee-col {
    flex-basis: 31%;
    background: #844b2f3e;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
    animation: slideIn 1s ease-out forwards;
}

.coffee-col:hover {
box-shadow: 0 0 20px 0px rgb(174, 70, 4);
transform: scale(1.1);

}


@media(max-width: 700px) {
    .row {
        flex-direction: column;
        }}
        #gallery {
            width: 100%;
            overflow: hidden;
            text-align: center;
            background: linear-gradient(#bb5d1f, #4e2503);
           
          }
          
          #gallery h1 {
            margin: 20px 0;
            font-size: 2.5rem;
            color: #333;
          }
          
          .slider {
            position: relative;
            width: 100%;
            height: 70vh;
            display: flex;
            overflow: hidden;
          }
          
          .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            transition: transform 1s ease-in-out;
            flex-shrink: 0;
            animation: slideAnimation 20s infinite;
          }
          
          .slide img {
            width: 100%;
            height: 90%;
            object-fit: cover;
            display: block;
          }
          
          .caption {
            position: absolute;
            bottom: 10%;
            left: 5%;
            background: rgba(63, 39, 39, 0.6);
            padding: 15px 25px;
            border-radius: 10px;
            font-size: 1.8rem;
            color: #fff;
          }
          .slide.active {
            display: block;
            animation: zoomIn 0.8s ease forwards;
          }
          
          
          @keyframes slideAnimation {
            0%   { transform: translateX(0%); }
            20%  { transform: translateX(0%); }
            25%  { transform: translateX(-100%); }
            45%  { transform: translateX(-100%); }
            50%  { transform: translateX(-200%); }
            70%  { transform: translateX(-200%); }
            75%  { transform: translateX(-300%); }
            95%  { transform: translateX(-300%); }
            100% { transform: translateX(0%); }
          }
          
  

.contact-container{
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(#ac6c14, #3b1601);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px #e42828(77, 1, 1);
   
    
  }
  .contact-container label {
    font-size: 16px;
    margin-bottom: 1.5rem;
    display: flex;
    
  }
  .contact-container input, .contact-container textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid #bb5406;
    border-radius: 4px;
    font-size: 1.25rem;
  }
  .contact-container button {
    background: linear-gradient(270deg,#bd8132, #945a02);
    color: rgb(48, 27, 1);
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    font-size: 20px;
    cursor: pointer;
    width: 100%;
  }
  .contact-container button:hover {
    box-shadow: 0 0 20px 0px rgba(192, 79, 4, 0.253);
    background: #874006;
  }
  .home-content {
    transform: translateX(200px);
}

#contact {
    padding: 40px 20px;
    background: #f3f3f3;
    text-align: center;
  }
  
  #contact h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #4a2f1b;
  }
  
  .contact-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
  
  .contact-item {
    background: #fff;
    padding: 20px;
    max-width: 300px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  
  .contact-item h3 {
    margin-bottom: 10px;
    color: #6b4f27;
  }
  
  .contact-item p {
    margin: 5px 0;
    font-size: 16px;
    color: #333;
  }
  
  .contact-item a {
    color: #6b4f27;
    text-decoration: none;
  }
  
  .contact-item a:hover {
    text-decoration: underline;
  }
  
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
        }

.whatsapp-float img {
    width: 70px;
    height: 70px;
    display: block;
}