:root {
      --primary: rgb(2, 157, 150);
      --secondary: rgb(175, 175, 175);
      --dark: #111111;
      --light: #f7f9f9;
    }

    body {
      color: #111111;
      background-color: #ffffff;
    }

    .text-primary,
    .nav-link.active,
    .nav-link:hover,
    .text-brown {
      color: var(--primary) !important;
    }

    .bg-primary,
    .btn-primary {
      background-color: var(--primary) !important;
      border-color: var(--primary) !important;
    }

    .btn-primary:hover,
    .btn-outline-primary:hover {
      background-color: #01877f !important;
      border-color: #01877f !important;
      color: #ffffff !important;
    }

    .btn-outline-primary {
      color: var(--primary) !important;
      border-color: var(--primary) !important;
    }

    .text-secondary-custom {
      color: var(--secondary) !important;
    }

    .bg-light {
      background-color: var(--light) !important;
    }

    .rounded-lg {
      border-radius: 1rem;
    }

    .min-vh-75 {
      min-height: 75vh;
    }

    .hero-card {
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(4px);
    }

    .service-anchor {
      scroll-margin-top: 110px;
    }

    .icon-container {
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rounded-icon {
      border-radius: 50%;
    }

    .card-img-top {
      height: 240px;
      object-fit: cover;
    }

    footer a:hover {
      color: var(--primary) !important;
    }

    #hero .container {
      position: relative;
      z-index: 2;
    }

    #coffee-beans-container {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }

    .bubble {
      position: absolute;
      bottom: -120px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.62) 42%, rgba(255, 255, 255, 0.22) 68%, rgba(255, 255, 255, 0.04) 100%);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: inset -10px -10px 18px rgba(255, 255, 255, 0.16), 0 0 16px rgba(255, 255, 255, 0.22);
      opacity: 0.85;
      animation: bubble-rise linear infinite;
    }

    .bubble::after {
      content: '';
      position: absolute;
      top: 18%;
      left: 22%;
      width: 24%;
      height: 24%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.82);
      filter: blur(1px);
    }

    #coffee-beans-container .bean,
    #coffee-beans-container .coffee-bean,
    #coffee-beans-container .coffee-beans,
    #coffee-beans-container i,
    #coffee-beans-container svg,
    #coffee-beans-container img {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    @keyframes bubble-rise {
      0% {
        transform: translate3d(0, 0, 0) scale(0.72);
        opacity: 0;
      }

      8% {
        opacity: 0.95;
      }

      45% {
        transform: translate3d(22px, -42vh, 0) scale(0.95);
      }

      75% {
        transform: translate3d(-18px, -78vh, 0) scale(1.08);
      }

      100% {
        transform: translate3d(14px, -115vh, 0) scale(1.18);
        opacity: 0;
      }}
[class*=" ri-"],[class^=ri-]{font-family:remixicon!important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}