/* main.css - to be minified */
:root {
  --primary: #8f7d75;
  --secondary: #b2a299;
  --accent: #a6958d;
  --light: #efeae3;
  --dark: #6c5e58;
  --text: #232323;
  --white: #ffffff;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Raleway', sans-serif;
  color: var(--text);
  line-height: 1.6;
  background-color: var(--light);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.75rem;
}

p {
  margin-bottom: 1.5rem;
}

/* Layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

/* Components */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--primary);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.btn:hover {
  background-color: var(--dark);
}

.btn-secondary {
  background-color: var(--secondary);
}

/* Header & Navigation */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #8f7d75; /* Match your theme color */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header.scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 70px;
  padding: 5px;
}

.nav-menu {
  display: flex;
  list-style: none;
}

.nav-menu li {
  margin-left: 20px;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-menu a:hover {
  opacity: 0.8;
}

/* Hide mobile menu toggle on desktop */
.mobile-menu-toggle {
  display: none;
}

/* Mobile menu overlay */
body.menu-active::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* Hero Section */
.hero {
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

  /* Add padding to sections with hero images to prevent header overlap */
.cabin-hero, 
.hero, 
.page-banner {
  padding-top: 80px; /* Adjust this value based on your header height */
}

/* Ensure hero content has proper spacing */
.cabin-hero-content,
.hero-content {
  padding-top: 60px; /* Additional padding for better spacing */
}

/* Improve text visibility on hero image */
.cabin-hero-content h1 {
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  color: var(--light);
}

.cabin-hero-content p {
  padding: 10px;
  border-radius: 5px;
  color: var(--light);
}

/* Add more bottom margin to the button */
.cabin-hero-content .btn {
  margin-bottom: 30px;
}

/* Increase space above the Descripción heading */
.cabin-overview h2:first-child {
  margin-top: 10px;
}

/* Adjust main content areas to account for fixed header */
.section-padding:first-of-type {
  padding-top: 100px;
}

/* Additional style for better mobile experience */
@media screen and (max-width: 768px) {
  /* Header adjustments for mobile */
  .header {
    padding: 10px 0;
  }

  .navbar {
    padding: 0 15px;
    align-items: center;
    height: 60px;
  }
  
  .logo img {
    height: 50px;
  }

  nav {
    display: flex;
    align-items: center;
  }

  .cabin-hero,
  .hero,
  .page-banner {
    padding-top: 70px; /* Slightly less padding on mobile */
  }

  .section-padding:last-of-type,
  .booking-cta,
  .attractions,
  .reviews,
  .amenities,
  .cabin-gallery,
  .cabin-overview {
    margin-bottom: 40px; /* Slightly less spacing on mobile */
  }
  
  .footer {
    margin-top: 30px;
  }
  
  .cabin-hero-content,
  .hero-content {
    padding-top: 40px;
  }
  
  .section-padding:first-of-type {
    padding-top: 80px;
  }

  .accordion-header h3 {
    font-size: 1rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 15px;
  }
  
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .lightbox-caption {
    font-size: 14px;
  }

  .row {
    flex-direction: column;
  }
  
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  /* Mobile menu styles */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background-color: #8f7d75;
    flex-direction: column;
    padding: 80px 20px 20px;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-menu li {
    margin: 0;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nav-menu li:last-child {
    border-bottom: none;
  }

  .nav-menu a {
    font-size: 1.1rem;
    display: block;
    padding: 15px;
    color: white;
  }

  .nav-menu a:hover,
  .nav-menu a.active {
    background-color: rgba(255,255,255,0.1);
  }

  /* Mobile menu toggle */
  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    position: relative;
    padding: 0;
    background: transparent;
    border: none;
  }
  
  .mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: white;
    border-radius: 1px;
    transition: all 0.3s ease;
    position: absolute;
    left: 8px;
  }
  
  .mobile-menu-toggle span:nth-child(1) {
    top: 12px;
  }
  
  .mobile-menu-toggle span:nth-child(2) {
    top: 19px;
  }
  
  .mobile-menu-toggle span:nth-child(3) {
    top: 26px;
  }
  
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 19px;
  }
  
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 19px;
  }

  .footer {
    padding: 50px 0 20px;
  }
  
  .footer .col {
    margin-bottom: 30px;
    min-width: 100%;
  }
  
  .footer .row {
    flex-direction: column;
  }
  
  .social-links a {
    width: 40px;
    height: 40px;
    margin: 0 5px;
  }

  .footer-brand {
    text-align: center;
  }

  .footer-logo {
    max-width: 170px !important;
    margin-bottom: 50px !important;
  }
}

/* Other components */
.card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 30px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.card-body {
  padding: 20px;
}

/* Increase bottom padding on the last section before the footer */
.section-padding:last-of-type,
.booking-cta,
.attractions,
.reviews,
.amenities,
.cabin-gallery,
.cabin-overview {
  margin-bottom: 60px; /* Adjust this value as needed for the desired spacing */
}

/* FAQ Accordion Styles */
.faq-category {
  margin-bottom: 40px;
}

.faq-category h2 {
  color: var(--dark);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--secondary);
  margin-bottom: 20px;
}

.accordion-item {
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background-color: white;
}

.accordion-header {
  padding: 15px 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: rgba(143, 125, 117, 0.05);
}

.accordion-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  flex: 1;
}

.accordion-icon {
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform 0.3s ease;
}

.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background-color: var(--primary);
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.accordion-icon::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon::after {
  transform: translateY(-50%) rotate(0);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-body {
  max-height: 1000px; /* This will be overridden by JS */
}

.accordion-body {
  padding: 0 20px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.accordion-item.active .accordion-body {
  padding: 20px;
}

.cta-section {
  margin-top: 60px;
  padding: 30px;
  background-color: rgba(178, 162, 153, 0.1);
  border-radius: 8px;
}

.cta-section h3 {
  margin-bottom: 15px;
  color: var(--dark);
}

.more-questions {
  margin-top: 60px;
  padding: 30px;
  background-color: rgba(178, 162, 153, 0.1);
  border-radius: 8px;
}

.more-questions h3 {
  margin-bottom: 15px;
  color: var(--dark);
}

/* Global list styling improvements - scoped to content areas only */
.faq-content ul, 
.faq-content ol,
.cabin-overview ul, 
.cabin-overview ol,
.amenities ul, 
.amenities ol,
.about ul,
.about ol {
  padding-left: 40px;
  margin-bottom: 15px;
}

.faq-content ul li, 
.faq-content ol li,
.cabin-overview ul li, 
.cabin-overview ol li,
.amenities ul li, 
.amenities ol li,
.about ul li,
.about ol li {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Ensure nested lists have proper spacing */
ul ul, ol ol, ul ol, ol ul {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Add appropriate spacing after paragraphs that come before lists */
p + ul, p + ol {
  margin-top: -5px;  /* Adjust for the bottom margin of paragraphs */
}

/* Specific styling for the FAQ and cabin descriptions */
.feature-list li, 
.amenity-list li {
  margin-bottom: 10px;
}

/* Style bullet points for different levels */
ul {
  list-style-type: disc;
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Match header height */
}

/* Gallery Grid Layout */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Gallery Item Styling */
.gallery-item {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  height: 0;
  padding-bottom: 75%;
  display: block;
  text-decoration: none;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.gallery-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  font-size: 14px;
}

.gallery-item:hover .caption {
  transform: translateY(0);
}

/* Lightbox Styling */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  max-width: 90%;
  max-height: 80vh;
  position: relative;
}

.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

.lightbox-caption {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 16px;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.lightbox-close:hover {
  background: rgba(255,255,255,0.2);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 30px;
  cursor: pointer;
  background: rgba(0,0,0,0.5);
  border: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.lightbox-nav:hover {
  background: rgba(0,0,0,0.8);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* Small spacing adjustment */
.mt-4 {
  margin-top: 1.5rem;
}

/* ENHANCED FOOTER STYLES - START */
.footer {
  background: linear-gradient(135deg, #6c5e58 0%, #8f7d75 50%, #a6958d 100%);
  color: #fff;
  padding: 70px 0 30px;
  position: relative;
  margin-top: 0;
  box-shadow: 0 -10px 20px rgba(0,0,0,0.1);
}

/* Decorative mountain-like top edge */
.footer::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 40px;
}

.footer .container {
  position: relative;
  z-index: 1;
}

.footer h4 {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.footer h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 40px;
  height: 3px;
  background-color: #efeae3;
  transition: width 0.3s ease;
}

.footer .col:hover h4::after {
  width: 100%;
}

.footer p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin-bottom: 20px;
}

.footer strong {
  color: #fff;
}

.footer .row {
  margin-bottom: 30px;
}

/* Enhanced social links */
.social-links {
  margin: 30px 0;
  display: flex;
  justify-content: center;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.social-links a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-links a:hover {
  transform: translateY(-5px);
  background-color: #efeae3;
  color: #6c5e58;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.social-links a:hover::before {
  opacity: 1;
}

/* Animated hover effect for social icons */
.social-links a i {
  transition: transform 0.3s ease;
}

.social-links a:hover i {
  transform: scale(1.2);
}

/* Stylish copyright section */
.copyright {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  position: relative;
}

.copyright::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #efeae3, transparent);
}

.copyright p {
  font-size: 14px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
}

/* Footer links styling */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 15px;
}

.footer-links a::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #efeae3;
  transition: transform 0.3s ease;
}

.footer-links a:hover {
  color: #fff;
  padding-left: 18px;
}

.footer-links a:hover::before {
  transform: translateX(3px);
}

/* Contact info styling */
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
}

.contact-info li i {
  margin-right: 10px;
  min-width: 20px;
  color: #efeae3;
}

/* Additional footer features */
.footer-logo {
  max-width: 120px;
  margin-bottom: 20px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.footer-logo:hover {
  opacity: 1;
}

/* Newsletter subscription form styling */
.newsletter-form {
  margin-top: 20px;
  position: relative;
}

.newsletter-form input {
  width: 100%;
  padding: 12px 15px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form button {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: #efeae3;
  color: #6c5e58;
  border: none;
  border-radius: 3px;
  padding: 7px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Lightbox styling fixes */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Ensure it's above everything */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 80vh;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 16px;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 30px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 10001;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 30px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 10000;
}

.lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* Ensure gallery items are clickable */
.gallery-item {
  cursor: pointer;
}

/* Make sure proper overflow handling */
body.no-scroll {
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  
  .lightbox-close {
    width: 35px;
    height: 35px;
    font-size: 24px;
  }
  
  .lightbox-caption {
    font-size: 14px;
  }
}

/* Gallery Section on Homepage */
.gallery {
  padding: 120px 0 140px;
  background-color: #f7f4f0;
  overflow: visible;
}

.gallery h2.section-title {
  margin-bottom: 50px;
  margin-top: 40px;
}

.gallery .text-center.mt-4 {
  margin-top: 40px !important;
  margin-bottom: 0;
}

/* FAQ Preview Section */
.faq-preview {
  padding: 100px 0;
  background: linear-gradient(135deg, #2c5e4a 0%, #7a9e7e 100%);
  position: relative;
  overflow: hidden;
  margin-top: 80px;
}

.faq-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 1;
}

.faq-preview .container {
  position: relative;
  z-index: 2;
}

.faq-preview h2 {
  color: white;
  font-size: 3rem;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.faq-preview p {
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 40px;
  font-size: 1.2rem;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.faq-preview .btn,
.faq-preview .btn-light {
  background-color: white;
  color: #2c5e4a;
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  border: none;
}

.faq-preview .btn:hover,
.faq-preview .btn-light:hover {
  background-color: #f7f4f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color: #2c5e4a;
}

/* Pricing Section */
.pricing {
  padding: 80px 0;
  background-color: white;
}

.pricing h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #6c5e58;
}

.price-card {
  background-color: #f7f4f0;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.price-card .accent-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background-color: #8f7d75;
  transition: width 0.3s ease;
}

.price-card:hover .accent-box {
  width: 8px;
}

/* Pine Cone Decoration */
.price-card::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50' fill='%238f7d75'%3E%3Cpath d='M20 0C20 0 10 5 10 15C10 15 5 18 5 25C5 25 0 28 0 35C0 42 8 50 20 50C32 50 40 42 40 35C40 28 35 25 35 25C35 18 30 15 30 15C30 5 20 0 20 0Z' /%3E%3Cpath fill='%236c5e58' d='M20 10C20 10 15 12 15 17C15 17 12 19 12 23C12 23 10 25 10 28C10 31 14 35 20 35C26 35 30 31 30 28C30 25 28 23 28 23C28 19 25 17 25 17C25 12 20 10 20 10Z' /%3E%3Cg fill='%23a6958d'%3E%3Ccircle cx='15' cy='20' r='1.5'/%3E%3Ccircle cx='25' cy='20' r='1.5'/%3E%3Ccircle cx='20' cy='25' r='1.5'/%3E%3Ccircle cx='18' cy='30' r='1.5'/%3E%3Ccircle cx='22' cy='30' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(-20px) rotate(-15deg);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.price-card:hover::before {
  opacity: 0.3;
  transform: translateY(0) rotate(0deg);
}

/* Second pine cone for visual interest */
.price-card::after {
  content: '';
  position: absolute;
  right: 60px;
  bottom: 15px;
  width: 30px;
  height: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50' fill='%23b2a299'%3E%3Cpath d='M20 0C20 0 10 5 10 15C10 15 5 18 5 25C5 25 0 28 0 35C0 42 8 50 20 50C32 50 40 42 40 35C40 28 35 25 35 25C35 18 30 15 30 15C30 5 20 0 20 0Z' /%3E%3Cpath fill='%238f7d75' d='M20 10C20 10 15 12 15 17C15 17 12 19 12 23C12 23 10 25 10 28C10 31 14 35 20 35C26 35 30 31 30 28C30 25 28 23 28 23C28 19 25 17 25 17C25 12 20 10 20 10Z' /%3E%3Cg fill='%23efeae3'%3E%3Ccircle cx='15' cy='20' r='1.5'/%3E%3Ccircle cx='25' cy='20' r='1.5'/%3E%3Ccircle cx='20' cy='25' r='1.5'/%3E%3Ccircle cx='18' cy='30' r='1.5'/%3E%3Ccircle cx='22' cy='30' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(20px) rotate(15deg) scale(0.8);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 0.1s;
}

.price-card:hover::after {
  opacity: 0.2;
  transform: translateY(0) rotate(-5deg) scale(0.8);
}

.price-card h4 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #6c5e58;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.price-card p {
  font-size: 1.1rem;
  color: #232323;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Map Section */
.map {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

/* Responsive for Gallery and Sections */
@media (max-width: 768px) {
  .gallery {
    padding: 80px 0;
  }
  
  .pricing {
    padding: 60px 15px !important;
  }
  
  .pricing .container {
    padding: 0 15px !important;
  }
  
  .price-card {
    margin-left: 0;
    margin-right: 0;
    padding: 25px 20px;
  }
  
  .pricing .row {
    margin: 0;
  }
  
  .pricing .col-md-8 {
    padding: 0;
  }
  
  .faq-preview {
    padding: 80px 0;
    margin-top: 60px;
  }
  
  .faq-preview h2 {
    font-size: 2.2rem;
  }
  
  .faq-preview p {
    font-size: 1.1rem;
    padding: 0 15px;
  }
  
  .faq-preview .btn,
  .faq-preview .btn-light {
    padding: 12px 30px;
    font-size: 1rem;
  }
  
  .gallery h2.section-title {
    margin-bottom: 30px;
  }
  
  .gallery .text-center.mt-4 {
    margin-top: 30px !important;
  }
  
  /* Additional mobile fixes */
  body {
    overflow-x: hidden !important;
  }
  
  .container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .row {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .col, .col-md-8, .col-md-2, .col-md-4, .col-md-6, .col-lg-4 {
    padding-left: 15px;
    padding-right: 15px;
  }
}