/* CSS Variables & Reset */
:root {
    --primary-gold: #C5A065;
    --dark-brown: #2C1810;
    --text-color: #3e2723;
    --bg-color: #FDF5E6;
    /* Fallback */
    --white: #ffffff;
    --light-gold: #E8DCC0;

    --font-heading: 'Cinzel', serif;
    --font-body: 'Lato', sans-serif;

    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Background Texture */
.bg-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('bg-texture.png');
    /* Will use generated image */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -2;
    opacity: 0.8;
    /* Adjust based on texture intensity */
    pointer-events: none;
}

/* Utility Containers */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

html,
body {
    overflow-x: hidden;
    /* Prevent horizontal scroll/overlap */
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--dark-brown);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    /* Pill shape for modern feel */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn i {
    margin-right: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #C5A065 0%, #E8DCC0 100%);
    color: var(--dark-brown);
    border: 1px solid var(--primary-gold);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #E8DCC0 0%, #C5A065 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(197, 160, 101, 0.4);
}

.btn-dark {
    background: linear-gradient(135deg, #2C1810 0%, #4e342e 100%);
    color: var(--white);
    border: 1px solid var(--dark-brown);
}

.btn-dark:hover {
    background: linear-gradient(135deg, #4e342e 0%, #2C1810 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(44, 24, 16, 0.5);
}

.btn-light {
    background: rgba(255, 255, 255, 0.9);
    color: var(--dark-brown);
    border: 1px solid var(--primary-gold);
    backdrop-filter: blur(5px);
}

.btn-light:hover {
    background: var(--white);
    color: var(--primary-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Header */
header {
    padding: 15px 0;
    border-bottom: 1px solid rgba(44, 24, 16, 0.1);
    position: relative;
    z-index: 100;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img {
    height: 50px;
    width: auto;
}

.logo-text h1 {
    font-size: 1.2rem;
    margin-bottom: -2px;
}

.logo-text span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-gold);
    font-weight: 600;
}

#main-nav ul {
    display: flex;
    gap: 30px;
}

#main-nav a {
    font-size: 0.95rem;
    color: var(--dark-brown);
    font-weight: 500;
    position: relative;
}

#main-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-gold);
    transition: width 0.3s;
}

#main-nav a:hover::after {
    width: 100%;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--dark-brown);
    cursor: pointer;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 60px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-bg-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background-image: url('astro-wheel.png');
    /* Custom generated wheel */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.08;
    /* Very light manner */
    z-index: -1;
    animation: rotate 60s linear infinite;
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.hero-logo-center img {
    height: 280px;
    /* Increased from 220px */
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(197, 160, 101, 0.6));
    /* Stronger glow */
}

.main-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.subtitle {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--primary-gold);
    letter-spacing: 3px;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.subtitle::before,
.subtitle::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--primary-gold);
    position: absolute;
    top: 50%;
}

.subtitle::before {
    left: -50px;
}

.subtitle::after {
    right: -50px;
}

.tagline {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: #4e342e;
}

.description {
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1.1rem;
    color: #5d4037;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Services Section */
.services {
    padding: 60px 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(243, 235, 219, 0.5) 100%);
    border-top: 1px solid rgba(197, 160, 101, 0.3);
}

.ornamental-divider {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.ornamental-divider h2 {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ornamental-divider .line {
    height: 1px;
    width: 100px;
    background: var(--dark-brown);
    position: relative;
}

.services-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.service-card {
    background-color: #fcf8f2;
    background-image: url('bg-texture.png');
    /* Subtle texture on cards too */
    flex: 1 1 200px;
    max-width: 220px;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: rotate(0deg);
    /* Prep for slight tilts if desired */
}

/* Slight "hand-placed" feel */
.service-card:nth-child(odd) {
    transform: rotate(-1deg);
}

.service-card:nth-child(even) {
    transform: rotate(1deg);
}

.service-card:hover {
    transform: translateY(-10px) rotate(0deg);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.card-inner {
    border: 1px dashed var(--primary-gold);
    padding: 20px 15px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-box {
    font-size: 2rem;
    color: var(--dark-brown);
    margin-bottom: 15px;
}

.service-tag {
    font-size: 0.7rem;
    background-color: #6d4c41;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.service-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    line-height: 1.3;
}

.service-card p {
    font-size: 0.85rem;
    color: #6d4c41;
}

.testimonial-bar {
    text-align: center;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px dotted var(--primary-gold);
}

.stars {
    color: var(--primary-gold);
    margin-bottom: 10px;
}

/* Footer & Contact */
footer {
    background-color: #1a0f0a;
    /* Very dark brown */
    color: #d7ccc8;
    padding: 60px 0 20px;
    margin-top: 40px;
    text-align: center;
    position: relative;
    border-top: 5px solid var(--primary-gold);
}

/* Curved Top Effect for Footer */
footer::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, #1a0f0a 50%, #1a0f0a 100%);
    background-size: 20px 20px;
}

/* Simplified curve approach likely better with SVG or clip-path, but staying simple for now */

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.icon-glow img {
    height: 60px;
    filter: drop-shadow(0 0 10px rgba(197, 160, 101, 0.5));
}

.footer-logo h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 15px;
    letter-spacing: 2px;
}

.footer-logo p {
    color: var(--primary-gold);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.contact-methods {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}

.contact-item i {
    color: var(--primary-gold);
}

.copyright {
    font-size: 0.8rem;
    color: #8d6e63;
    border-top: 1px solid #3e2723;
    padding-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {

    /* Remove top bar visual on mobile */
    .header {
        background-color: transparent;
        box-shadow: none;
        height: auto;
        pointer-events: none;
        /* Let clicks pass through empty space */
    }

    .header-container {
        padding: 10px 15px;
        align-items: flex-start;
    }

    /* Hide logo text to remove "bar" feel, or keep it? 
       User said "remove top bar". Usually implies the strip. 
       Let's keep the logo icon but hide the text, or just hide the logo entirely if they want a clean view.
       Let's try removing the background first. 
    */

    .logo {
        /* Optional: Hide logo if they want full removal */
        /* display: none; */
        pointer-events: auto;
    }

    .logo-text {
        display: none;
        /* Hide text to minimize header */
    }

    .header-cta {
        pointer-events: auto;
    }

    #main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        background: rgba(255, 250, 240, 0.8);
        /* Semi-transparent background for visibility */
        border-radius: 4px;
        padding: 8px 12px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .mobile-menu-toggle {
        display: block;
        margin-left: 15px;
        /* Add spacing between button and burger */
    }

    /* Fix header overlap */
    .header-cta .whatsapp-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* On very small screens, hide the button entirely to save space */
    @media (max-width: 600px) {
        .header-cta .whatsapp-btn {
            display: none;
        }

        /* Ensure logo text doesn't hit burger menu on tiny screens */
        .logo-text h1 {
            font-size: 1rem;
        }
    }

    .main-title {
        font-size: 2rem;
    }

    .tagline {
        font-size: 1.5rem;
    }

    .subtitle::before,
    .subtitle::after {
        display: none;
        /* Remove lines on small screens */
    }

    .services-grid {
        gap: 15px;
    }

    .service-card {
        flex: 1 1 100%;
        /* Stack cards */
        max-width: 300px;
        transform: none !important;
        /* Remove rotation on mobile for cleaner look */
    }

    .contact-methods {
        flex-direction: column;
        gap: 15px;
    }
}

/* Mobile Menu Overlay Styles */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    height: 100%;
    background-color: var(--bg-color);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: right 0.3s ease;
    padding: 60px 20px;
}

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

.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark-brown);
}

.mobile-menu ul li {
    margin-bottom: 20px;
}

.mobile-menu ul li a {
    font-size: 1.2rem;
    font-family: var(--font-heading);
    color: var(--dark-brown);
}

/* Testimonial Grid & Reviews */
.testimonial-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-bottom: 40px;
}

.testimonial-card {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--light-gold);
    padding: 30px 20px;
    border-radius: 8px;
    flex: 1 1 300px;
    max-width: 500px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.9);
}

.testimonial-card::before {
    content: '\201C';
    font-family: serif;
    font-size: 5rem;
    color: var(--primary-gold);
    position: absolute;
    top: -10px;
    left: 20px;
    opacity: 0.2;
    line-height: 1;
}

.testimonial-card .stars {
    color: var(--primary-gold);
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.review-text {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 20px;
    color: #4e342e;
    line-height: 1.6;
}

.review-author {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--dark-brown);
    font-size: 0.95rem;
    letter-spacing: 1px;
    margin-top: auto;
    border-top: 1px solid var(--light-gold);
    padding-top: 10px;
    width: 80%;
}

/* YouTube Section */
.youtube-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--primary-gold);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.channel-cta {
    text-align: center;
}

.channel-cta p {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--dark-brown);
}

.channel-cta .btn-primary {
    background-color: #c4302b;
    /* YouTube Red */
    border-color: #c4302b;
    color: white;
}

.channel-cta .btn-primary:hover {
    background-color: #9e201c;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(196, 48, 43, 0.3);
}

/* About Section */
.about-section {
    padding: 80px 0;
    background-color: #fffaf0;
    /* Slightly lighter than main bg */
    border-bottom: 1px solid rgba(197, 160, 101, 0.2);
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 40px;
    background: #fff;
    border: 1px double var(--primary-gold);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    position: relative;
}

/* Corner ornaments (simple CSS shapes) */
.about-content::before,
.about-content::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-gold);
    transition: all 0.3s ease;
}

.about-content::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.about-content::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

.about-grid {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.about-image {
    flex: 0 0 35%;
    max-width: 35%;
}

.about-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    border: 3px solid var(--primary-gold);
}

.about-text {
    flex: 1;
}

@media (max-width: 768px) {
    .about-grid {
        flex-direction: column;
        text-align: center;
    }

    .about-image {
        flex: 0 0 100%;
        max-width: 250px;
        /* Limit image size on mobile */
        margin-bottom: 20px;
    }
}

.about-text h3 {
    font-size: 2rem;
    color: var(--dark-brown);
    margin-bottom: 10px;
}

.lead-text {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--primary-gold);
    margin-bottom: 20px;
    font-family: var(--font-heading);
}

.about-text p {
    font-size: 1.05rem;
    color: #4e342e;
    margin-bottom: 15px;
    line-height: 1.8;
}

.about-text strong {
    color: #8B4513;
    font-weight: 700;
}/* Location Section */
.location-section {
    margin-bottom: 60px;
    text-align: center;
}

.map-container-wrapper {
    position: relative;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--primary-gold);
    box-shadow: var(--shadow-card);
    border-radius: 8px;
    max-width: 900px;
    margin: 0 auto;
}

.map-container-wrapper::before,
.map-container-wrapper::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--primary-gold);
    transition: all 0.3s ease;
    pointer-events: none;
}

.map-container-wrapper::before {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
}

.map-container-wrapper::after {
    bottom: -5px;
    right: -5px;
    border-left: none;
    border-top: none;
}

.map-frame {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.map-frame iframe {
    display: block;
    width: 100%;
}