:root{
      --brand:#ff4d4f;
      --dark:#111;
    }
    body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}

    /* Navbar */
    .navbar{background:#fff;border-bottom:1px solid #f0f0f0; z-index: 2 !important;}
    .navbar.navbar-light .navbar-toggler{border-color:#ddd;}
    .navbar .navbar-toggler-icon{
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .nav-link{transition:color .2s ease, opacity .2s ease}
    .nav-link:hover{color:var(--brand);opacity:.85}

    /* Hero */
    
    .btn-custom:hover{transform:scale(1.05);box-shadow:0 10px 25px rgba(255,77,79,.35);filter:saturate(1.1)}

    /* HERO slideshow image */
    .hero-unit-pic{position:relative}
    .hero-unit-pic img{
      width:100%;
      max-width:520px;
      border-radius:16px;
      /* box-shadow:0 20px 50px rgba(0,0,0,.15); */
      transition:opacity .6s ease, transform .6s ease;
      opacity:1; transform:translateX(0);
    }
    /* outgoing */
    .hero-unit-pic img.is-exiting{opacity:0;transform:translateX(-40px)}
    /* incoming start state */
    .hero-unit-pic img.is-entering{opacity:0;transform:translateX(40px)}

    

    /* Drinks grid cards */
    .drink-card{
      background:#fff;border-radius:16px;overflow:hidden;
      padding:12px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.06);
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .drink-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.10)}
    .drink-card img{
      width:100%;border-radius:12px;
      transition:transform .4s ease, box-shadow .4s ease;
      will-change:transform;
    }
    .drink-card img:hover{transform:scale(1.1);box-shadow:0 12px 24px rgba(0,0,0,.18)}

    /* Join + Footer */
    /* #join{background:linear-gradient(135deg,#111,#2a2a2a)} */
    footer{background:#111;text-align:center}
    footer a{text-decoration:none}

    /* Scroll-to-top */
    .scroll-top{
      position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;
      display:none;align-items:center;justify-content:center;background:var(--brand);color:#fff;
      box-shadow:0 12px 28px rgba(255,77,79,.35);cursor:pointer;z-index:9999;
      transition:transform .2s ease;
    }
    .scroll-top:hover{transform:translateY(-2px)}
    .modal-content{padding:28px;border-radius:16px;text-align:center}

    h2{color: #123b22; font-size: 4rem; font-family: "Playfair Display", serif; color: #113f24; font-weight: 700;}
    p{font-size: 1.5rem; color: #123b22; }
    .navbar { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .hero { position:relative; background-color: #f7737e; color: white; min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 80px 20px; }
    .container{ width: 1100px;}
    .hero h1 { font-size: 8rem; color: #0c4b26; font-family: "Playfair Display", serif;}
    .btn-custom { background: #113f24; color: white; padding: 10px 25px; }
    .hero .hero-unit-pic{ position: absolute; right: 100px; top: -100px;}
    .hero .hero-unit-pic img{ height: 650px;}
    .btn-custom:hover { background: #0f3d20; color: #f9dfd2;}
    #about, #career{background: #f9dfd2;}
    #career form{background: #133f24;}
    #career form .form-label{color: #fff;}
    #career form button[type=submit]{ background: #f7737e; border: none;}
    #career form button[type=submit]:hover{ background: #fef4ea; color: #000;}
    .about-img img { border-radius: 15px; width: 100%; }
    .drink-card { text-align: center; transition: transform 0.3s; }
    .drink-card:hover { transform: translateY(-10px); }
    footer { background: #133f24; text-align: center; }
    .scroll-top { position: fixed; bottom: 20px; right: 20px; background: #113f24; color: white; padding: 12px 16px; border-radius: 50%; display: none; cursor: pointer; z-index: 999; }
    /* Age popup */
    #ageModal .modal-content { text-align: center; padding: 20px; }
    #drinks{ background: #fff5ec;}
    #drinks-animation{ background: linear-gradient(to bottom, rgba(255, 245, 236, 1) 0%, rgba(250, 224, 207, 1) 100%);
}
    #join{ background: url(../img/sunset.jpg) no-repeat left top; background-size: cover; background-position: fixed; height: 50vh; display: flex; align-items: center; justify-content: center;}
.shimmer {
  color: grey;
  display: inline-block;
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;
  animation: shimmer 2.5s infinite 4.5s;
  /* max-width: 200px; */
}

.slick-prev:before, .slick-next:before{
    color: #f7737e;
    font-size: 30px;
}

.breadcrumb{
  background-color: #f7737e;
}
@keyframes shimmer {
  100% {
    mask-position: left
  }
}
    @media screen and (max-width: 768px) {
        .hero h1{
            font-size: 4rem;
        }
        .hero .hero-unit-pic{
            right: 0;
        }
        .hero .hero-unit-pic img {
            height: 380px;
        }
    }