/* =========================================
   THEME VARIABLES
   ========================================= */
:root { 
    --bg-main: #f2e9e0;
    --bg-alt: #e1cfc7;
    --text-main: #3b2f2f; 
    --text-light: #ffffff; 
    --header-bg: #2b241f; 
    --header-accent: #d4a373; 
    --color-btn-rust: #813222; 
    --color-btn-rust-hover: #5e2418; 
    --color-btn-olive: #1a2f2b; 
    --color-btn-olive-hover: #313719; 
    --font-body: 'Montserrat', sans-serif; 
    --font-heading: 'Playfair Display', serif; 
    --header-height: 80px; 
    --container-max: 80%; 
    --transition-speed: 0.3s ease; 
    --shadow-text: 2px 2px 5px rgba(0,0,0,0.7); 
    --shadow-box: 0 4px 10px rgba(0,0,0,0.15); }

/* =========================================
   BASE STYLES, RESETS & TYPOGRAPHY
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background-color: var(--bg-main); color: var(--text-main); padding-top: var(--header-height); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; }
h1 { font-size: 48px; color: var(--text-light); margin-bottom: 30px; text-shadow: var(--shadow-text); letter-spacing: 1px; }
.heading-secondary { font-size: 36px; color: var(--text-main); margin-bottom: 12px; }
.text-body { font-size: 14px; line-height: 1.8; color: var(--text-main); text-align: justify;margin-bottom: 3%;}
.heading-primary-overlay { 
    font-size: 42px; 
    color: var(--text-light); 
    margin-bottom: 30px; 
    text-shadow: var(--shadow-text); 
    font-weight: 700; 
    letter-spacing: 1px; 
}
/* Footer Typography & Links */
.footer-col p { color: #dcdcdc; line-height: 1.8; font-size: 15px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { text-decoration: none; color: #dcdcdc; font-size: 15px; transition: color var(--transition-speed); }
.footer-links a:hover { color: var(--header-accent); }

/* =========================================
   REUSABLE UTILITIES & CONTAINERS
   ========================================= */
.bg-alt { background-color: var(--bg-alt); }
.bg-paper-single { 
    background-image: url('../images/why-choose-us-bg.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; padding-top: 80px; 
    padding-bottom: 80px; margin-top: -15px; margin-bottom: -15px; position: relative; z-index: 5;}
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 80px 0; }
.text-center { text-align: center; }
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
.grid-4-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.grid-sidebar-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; align-items: start; }
.divider-double { width: 100%; height: 1px; background-color: var(--text-main); margin-bottom: 25px; position: relative; }
.divider-double::after { content: ''; position: absolute; top: 4px; left: 0; width: 100%; height: 1px; background-color: var(--text-main); opacity: 0.3; }
.heading-with-lines { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 36px; color: var(--text-main); font-family: var(--font-heading); font-weight: 700; }
.heading-with-lines::before, .heading-with-lines::after { content: ''; flex: 1; height: 1px; background-color: var(--text-main); opacity: 0.3; max-width: 250px; }
.bg-parallax-banner { position: relative; background-image: url('../images/sunset-adventure.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;}
.bg-dark-texture { background-color: var(--header-bg); color: var(--text-light); }
/* Spacing Utilities */
.mb-30 { margin-bottom: 30px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }

/* Button Modifiers */
.btn-block { display: block; width: 100%; margin-top: 10px; text-align: center; }
.btn-large { font-size: 18px; padding: 15px 40px; }

/* =========================================
   REUSABLE COMPONENTS (BUTTONS & IMAGES)
   ========================================= */
.btn-primary { display: inline-block; background-color: var(--color-btn-rust); color: var(--text-light); font-family: var(--font-body); font-weight: 600; font-size: 16px; text-decoration: none; padding: 12px 30px; border-radius: 6px; transition: background-color var(--transition-speed); box-shadow: var(--shadow-box); }
.btn-primary:hover { background-color: var(--color-btn-rust-hover); color: var(--text-light); }
.btn-secondary { display: inline-block; background-color: var(--color-btn-olive); color: var(--text-light); font-weight: 600; text-decoration: none; padding: 10px 24px; border-radius: 4px; transition: background-color var(--transition-speed); }
.btn-secondary:hover { background-color: var(--color-btn-olive-hover); }
.photo-frame { display: block; max-width: 100%; height: auto; border: 10px solid var(--text-light); box-shadow: var(--shadow-box); transform: rotate(2deg); transition: transform var(--transition-speed); }
.photo-frame:hover { transform: rotate(0deg) scale(1.02); }
.card { background-color: #faf8f2; padding: 15px; box-shadow: var(--shadow-box); text-align: center; display: flex; flex-direction: column; transition: transform var(--transition-speed); }
.card:hover { transform: translateY(-5px); } 
.card-img { width: 100%; height: 200px; object-fit: cover; display: block; margin-bottom: 15px; }
.card-title { font-family: var(--font-heading); font-size: 22px; color: var(--text-main); margin-bottom: 10px; font-weight: 700; }
.card-divider { width: 60%; height: 1px; background-color: var(--text-main); opacity: 0.2; margin: 0 auto 15px auto; }
.card-text { font-size: 13px; line-height: 1.6; color: var(--text-main); margin-bottom: 20px; flex-grow: 1; }
.feature-item { text-align: center; display: flex; flex-direction: column; align-items: center; }
.feature-icon { width: 100px; height: 100px; object-fit: contain; margin-bottom: 15px; }
.feature-title { font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--text-main); position: relative; padding-bottom: 8px; display: inline-block; }
.feature-title::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 2px; background-color: var(--text-main); opacity: 0.8; }
.text-center { text-align: center; }

/* =========================================
   HEADER & FOOTER NAVIGATION
   ========================================= */
.main-header { background-color: var(--header-bg); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: var(--shadow-box); }
.header-container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; height: var(--header-height); display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-img { height: 50px; width: auto; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; justify-content: center; }
.logo-title { font-family: var(--font-heading); font-size: 26px; color: var(--header-accent); font-weight: 700; line-height: 1.1; }
.logo-title span { color: var(--text-light); }
.logo-subtitle { font-family: var(--font-body); font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 30px; }
.nav-list a { text-decoration: none; color: var(--text-light); font-weight: 500; font-size: 15px; transition: color var(--transition-speed); }
.nav-list a:hover { color: var(--header-accent); }
.footer-heading { display: flex; align-items: center; gap: 15px; font-family: var(--font-heading); font-size: 24px; color: var(--text-light); margin-bottom: 25px; font-weight: 700; white-space: nowrap; }
.line-double { height: 6px; border-top: 1px solid var(--header-accent); border-bottom: 1px solid var(--header-accent); opacity: 0.6; }
.line-flex { flex: 1; } 
.line-short { width: 30px; } 
.footer-heading { display: flex; align-items: center; gap: 15px; font-family: var(--font-heading); font-size: 24px; color: var(--text-light); margin-bottom: 25px; font-weight: 700; white-space: nowrap; }
.line-double { height: 6px; border-top: 1px solid var(--header-accent); border-bottom: 1px solid var(--header-accent); opacity: 0.6; }
.line-flex { flex: 1; } 
.line-short { width: 30px; } 

/* =========================================
   404 ERROR PAGE
   ========================================= */
.error-section {min-height: 60vh; display: flex;align-items: center;justify-content: center;}
.error-code {font-family: var(--font-heading);font-size: 150px; color: var(--header-accent);line-height: 1;margin-bottom: 10px;text-shadow: 4px 4px 0px rgba(0,0,0,0.05); }
@media (max-width: 768px) {.error-code { font-size: 100px; }}

/* =========================================
   HERO BANNER
   ========================================= */
.hero-banner { position: relative; width: 100%; height: 81vh; min-height: 500px; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 81px; overflow: hidden; }
.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-content { position: relative; max-width: 90%; padding: 0 20px; z-index: 15; }

/* =========================================
   RESPONSIVE DESIGN (MOBILE)
   ========================================= */
@media (max-width: 768px) {
    .grid-2-col { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .photo-frame { transform: rotate(0deg); }
    .hero-content h1 { font-size: 32px; }
    .mobile-toggle { display: block; }
    .main-nav { position: fixed; left: -100%; top: var(--header-height); background-color: var(--header-bg); width: 100%; height: calc(100vh - var(--header-height)); transition: left var(--transition-speed); text-align: center; }
    .main-nav.active { left: 0; }
    .nav-list { flex-direction: column; padding-top: 40px; gap: 40px; }
    .grid-4-col { grid-template-columns: 1fr; gap: 30px; }
    .heading-with-lines { font-size: 28px; }
    .heading-with-lines::before, .heading-with-lines::after { max-width: 50px; }
    .grid-3-col { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================
   INNER PAGE HERO & TABS
   ========================================= */
.hero-inner { height: 50vh; min-height: 400px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.hero-inner .container { position: relative; z-index: 2; width: 100%; text-align: left; margin: 0 auto; }
.booking-header { padding: 30px 20px; text-align: center; color: var(--text-light); background-image: url('../images/booking-header-bg.jpg'); background-size: cover; background-position: center; position: relative; }  
.hero-inner-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.hero-inner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;z-index: 1; }
.hero-inner .container { position: relative; z-index: 2; width: 100%; text-align: left; }
.hero-inner-title { font-size: 56px; color: var(--text-light); text-shadow: var(--shadow-text); margin-bottom: 5px; }
.hero-inner-subtitle-banner {
    display: inline-flex; align-items: center; justify-content: center; background-image: url('../images/ripped-paper-piece.png'); background-size: 100% 100%; 
    background-position: center; background-repeat: no-repeat; min-height: 55px; padding: 10px 45px; position: relative; white-space: nowrap; }
.hero-inner-subtitle { font-family: var(--font-heading); font-size: 24px; color: var(--text-main); font-weight: 700; line-height: 1;}

/* ... Tabs CSS remains the same ... */
.package-tabs-wrapper { background-color: #e8e3d3; padding-bottom: 1%; border-bottom: 2px solid #d4cca6; }
.package-tabs { list-style: none; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.package-tabs a { display: inline-block; padding: 12px 24px; background-color: var(--bg-main); color: var(--text-main); text-decoration: none; font-weight: 600; font-family: var(--font-body); transition: all var(--transition-speed); border: 1px solid #d4cca6; }
.package-tabs a:hover, .package-tabs a.active { background-color: var(--color-btn-olive); color: var(--text-light); border-color: var(--color-btn-olive); }
.grid-sidebar-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; align-items: start; }

/* =========================================
   MAIN CONTENT STYLES (Left Column)
   ========================================= */
.content-feature-img { width: 100%; height: auto; display: block; margin: 30px 0; box-shadow: var(--shadow-box); }
.custom-checklist { list-style: none; margin-bottom: 30px; }
.custom-checklist li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 16px; line-height: 1.6; color: var(--text-main); }
.custom-checklist li::before { content: '✔'; position: absolute; left: 0; top: 0; color: var(--color-btn-olive); font-size: 18px; font-weight: bold; }
.animal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; margin-top: 20px; }
.animal-item img { width: 140px; height: 140px; object-fit: cover; margin-bottom: 10px; box-shadow: var(--shadow-box); border: 4px solid var(--bg-main);border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%; }
.animal-item h4 { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--text-main); }

/* =========================================
   SIDEBAR WIDGETS (Right Column) - UPDATED
   ========================================= */
.booking-widget { background-color: var(--bg-main); box-shadow: var(--shadow-box); border: 1px solid #e2dcd0; margin-bottom: 40px; }
.booking-header { position: relative; background-image: url('../images/booking-header-bg.jpg'); background-size: cover; background-position: center; padding-top: 70px; padding-bottom: 20px; min-height: 230px; }
.booking-header::before { display: none; } 
.booking-header h3 { position: absolute; top: 0; left: 0; width: 100%; background-color: #3b4a2e; color: var(--text-light); padding: 15px 20px; font-size: 24px; text-align: center; margin: 0; z-index: 2;}
.booking-header p { 
    position: relative; z-index: 2; color: var(--text-light); text-align: right; padding-right: 15px; margin-top: 10px; font-family: var(--font-body); 
    font-size: 16px; font-weight: 500; line-height: 1.3; text-shadow: 1px 1px 4px rgba(0,0,0,0.8); }
.booking-form { padding: 25px; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--text-main); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; background-color: #faf8f2; font-family: var(--font-body); font-size: 14px; color: var(--text-main); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-btn-olive); }

.booking-contact { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 20px; background-color: #ebe5d5; border-top: 1px solid #d4cca6; }
.phone-icon { width: 35px; height: 35px; }
.booking-contact span { display: block; font-size: 12px; color: var(--text-main); }
.booking-contact strong { display: block; font-size: 18px; color: var(--text-main); }

.pricing-table { width: 100%; border-collapse: collapse; background-color: var(--bg-main); box-shadow: var(--shadow-box); text-align: center; font-family: var(--font-body); }
.pricing-table th { background-color: #2b3a27; color: var(--text-light); padding: 15px 10px; font-size: 12px; font-weight: 600; border: 1px solid #1a2318; }
.pricing-table td { padding: 12px 10px; font-size: 14px; font-weight: 600; color: var(--text-main); border: 1px solid #e2dcd0; }
.pricing-table tbody tr:nth-child(even) { background-color: #fcfbfa; }

/* FULL-WIDTH IMAGE BREAKOUT */
.full-width-breakout-wrapper {height: 450px; width: 100%;margin-bottom: 40px;}
.full-width-image-bg { position: absolute; left: 0; width: 100vw; height: 450px; background-size: cover; background-position: center; z-index: 1; }
.bg-paper { position: relative; } 
.sidebar { position: relative; z-index: 10; }

/* =========================================
   RESPONSIVE ADJUSTMENTS
   ========================================= */
@media (max-width: 992px) {
    .grid-sidebar-layout { grid-template-columns: 1fr; } 
    .animal-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-inner-title { font-size: 42px; }
}
@media (max-width: 480px) {
    .animal-grid { grid-template-columns: 1fr; }
    .package-tabs { flex-direction: column; width: 100%; }
    .package-tabs a { display: block; text-align: center; width: 100%; }
}