:root {
            --primary: #2E4A3D;
            --secondary: #526E7F;
            --neutral-light: #D8C3A5;
            --neutral-dark: #A69B97;
            --accent: #8A4B2F;
            --amber: #E29B5C;
            --charcoal: #333333;
            --cool-gray: #C0C0C0;
            --soft-green: #e6eee9;
            --stone-gray: #f1edea;
        }

        body {
            background-color: white;
            color: var(--charcoal);
            font-family: 'Inter', sans-serif;
            margin: 0;
        }

        h1, h2, h3, .cta-btn {
            font-family: 'Inter', sans-serif;
        }
        
        /* Navbar */
        
        .navbar {
            background-color: var(--primary);
            margin: 0;
            padding: 0;
        }
        
        .navbar-brand img {
            height: 40px;
        }
        
        .navbar-nav .nav-link {
            color: white;
            font-weight: 600;
            margin-right: 15px;
            transition: color 0.3s ease-in-out;
        }
        
        .navbar-nav .nav-link:hover {
            color: var(--amber);
        }
        
        .btn-outline-light {
            padding: 8px 16px;
            font-size: 0.9rem;
            border-width: 2px;
            transition: 0.3s ease-in-out;
        }
        
        .btn-outline-light:hover {
            background-color: var(--amber);
            border-color: var(--amber);
            color: white;
        }
        
        .readable-content {
          max-width: 700px;
          margin: 0 auto;
        }

        /* Hero */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-clarity {
  position: relative;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
    
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2.2px);
  transform: scale(1.05); /* Prevent edge blur */
  z-index: 0;
}

.hero-bg-clarity {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Soft dark overlay */
  z-index: 1;
}

.hero .container {
  z-index: 2;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  padding: 80px 0;
}

/*this is for the clarity pulse overlay*/
.hero-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* tweak this value as needed */
  z-index: -1;
}


    /* Updated Button Styling */
         .cta-btn {
        background-color: var(--accent);
        color: white;
        padding: 6px 16px; /* Reduced padding to make the button thinner */
        font-size: 0.9rem; /* Slightly smaller font for a more compact look */
        border-radius: 4px; /* Slightly reduced border radius for a sharper look */
        text-decoration: none;
        transition: 0.3s ease-in-out;
        display: inline-block; /* Ensures buttons behave correctly in different layouts */
        font-weight: 600; /* Keeps text readable and well-contrasted */
        border: 2px solid var(--accent); /* Adds subtle definition */
    }
    
        .cta-btn:hover {
            background-color: var(--amber);
            border-color: var(--amber);
        }
    
    /* Login Button */
         .btn-outline-light {
        padding: 5px 14px; /* Adjusted padding to be thinner */
        font-size: 0.85rem; /* Smaller font for a more compact appearance */
        border-width: 1.5px; /* Thinner border for a sleeker look */
    }
    

        /*About us https://images.unsplash.com/photo-1532768641073-503a250f9754?fit=crop&w=1600&h=900&q=80 */
        .aboutus-hero {
            background: url('https://wayfinderslodge.com/assets/img/about_us_hero.png') center/cover no-repeat;
            height: 85vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            background-blend-mode: overlay;
            background-color: rgba(46, 74, 61, 0.6);
            padding: 20px;
        }
        
        .benefit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 50px;
        }

        .benefit img {
            max-width: 50%;
            border-radius: 10px;
        }

        .benefit-text {
            max-width: 45%;
        }


        .profile-circle {
          width: 180px;             /* Or any size that works in your layout */
          height: 180px;
          border-radius: 50%;
          object-fit: cover;
          border: 3px solid var(--neutral-dark); /* Optional: adds a soft border */
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional: adds depth */
        }

        .profile-circle:hover {
          transform: scale(1.02);
          transition: transform 0.3s ease-in-out
        }


        .section {
            padding: 80px 0;
        }
        
        .section h2 {
            margin-bottom: 3rem;
        }
        
        section.journey-block {
          padding-top: 0;
          padding-bottom: 0;
          margin-bottom: 0;
        }
        
        section.journey-block .container {
          padding-top: 60px;  /* Keep vertical rhythm inside */
          padding-bottom: 60px;
        }
        
        .section-alt {
          padding-top: 60px;
          padding-bottom: 60px;
        }
        
        .section-alt:nth-of-type(even) {
          background-color: #f8f9fa;
        }
        .section-alt .img-fluid {
          border-radius: 8px;
        }
        
        .offer-card {
          background-color: #f4f1ed;
          border: 1px solid #e0e0e0;
          border-radius: 12px;
          padding: 2rem;
          /*box-shadow: 0 4px 10px rgba(0,0,0,0.04);*/
          transition: box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        
        .offer-card .offer-btn {
          min-width: 160px;   /* You can adjust this */
          width: 100%;
          max-width: 200px;   /* Prevents it from getting too wide */
        }
        
        .offer-card p {
          flex-grow: 1;
        }
        
        .offer-card .text-center {
          display: flex;
          justify-content: center;
        }

.offer-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
        
        .signup-section {
            background-color: var(--primary);
            color: white;
            padding: 50px 0;
            text-align: center;
        }
        
            /* Sign-Up Button *//* Ensure input and button have the same height */
        .signup-section form {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px; /* Adds a small space between input and button */
        }
        
        .signup-input {
            padding: 8px 16px;
            font-size: 0.9rem;
            border: 2px solid var(--neutral-dark);
            border-radius: 4px;
            height: 40px; /* Set consistent height */
            flex: 1; /* Allows input to expand properly */
            max-width: 300px; /* Prevents it from getting too wide */
        }

        .signup-section .cta-btn {
            padding: 8px 16px; /* Match padding with input */
            font-size: 0.9rem;
            border-radius: 4px;
            height: 40px; /* Same height as input */
            line-height: normal; /* Prevents text misalignment */
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap; /* Prevents text wrapping */
            flex-shrink: 0; /* Prevents button from resizing oddly */
        }

        .bg-primary-custom {
            background-color: var(--primary);
            color: white;
        }

        .footer {
            background-color: var(--charcoal);
            color: white;
            padding: 20px 0;
            text-align: center;
        }
        

.offer-btn {
  background-color: #8A4B2F;
  color: white;
  border: 2px solid #8A4B2F;
}

.offer-btn:hover {
  background-color: var(--amber);
  border-color: var(--amber);
}

  .hover-card {
  transition: background-color 0.3s ease-in-out
}
  .hover-card:hover {
    transform: translateY(-5px);
    background-color: #f0f0f0;
}
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .fade-in.visible {
    opacity: 1;
    transform: none;
  }
  .scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .scale-up.visible {
    opacity: 1;
    transform: scale(1);
  }
  .btn, .btn-primary, .btn-outline-primary, .btn-outline-light, .cta-btn {
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 6px;
  }

.hover-card i {
  font-size: 2.5rem;
}

.footer {
  background-color: #2E4A3D;
  color: white;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.icon-lg {
  font-size: 2.5rem;
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: auto;
  margin-right: 0.5rem;
}

.icon-circle-li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  font-size: 1.25rem;
  margin-right: 0.75rem;
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.bg-amber {
    background-color: var(--amber);
}


.btn:hover, .btn-primary:hover, .btn-outline-primary:hover, .btn-outline-light:hover, .cta-btn:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out
}

.container {
  max-width: 1140px;
}

ul.list-unstyled li {
  margin-bottom: 1.25rem;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.btn-outline-light:hover {
  border-color: #f8f9fa;
}



.footer p {
  font-size: 0.75rem;
}

#join-process {
  padding-top: 120px;
  padding-bottom: 120px;
}

.navbar-brand img {
  height: 35px;
}

#join-process {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-btn {
  transition: background-color 0.3s ease-in-out;
}

button, a.btn, .cta-btn, .btn-primary, .btn-outline-light {
  color: #ffffff;
}

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

.btn-outline-primary:hover {
  background-color: var(--primary);
  color: white;
}

    /* Responsive Adjustments */
       @media (max-width: 768px) {
         .container {
            padding-left: 1rem;
            padding-right: 1rem;
          }
        .cta-btn {
            padding: 8px 14px; /* Adjust for mobile touch-friendliness */
            font-size: 0.85rem;
        }
    
        .btn-outline-light {
            padding: 6px 12px;
        }
}
    }
        
        /* Adjustments for Mobile Screens */
        @media (max-width: 576px) {
            .signup-section form {
                flex-direction: column; /* Stack input and button on small screens */
                gap: 10px; /* Space between elements */
            }
        
            .signup-input, 
            .signup-section .cta-btn {
                width: 100%; /* Make full width on mobile */
                max-width: 100%;
            }
            
          .hero {
            height: 70vh;
          }
          .hero h1 {
            font-size: 2rem;
          }
          .profile-circle {
                width: 120px;
                height: 120px;
          }
}

        }