/* style.css */

/* Custom CSS Variables - These will be dynamically updated from admin panel */
:root {
    --color-custom-dark: #121212;
    --color-custom-light: #f8f6f2;
    --color-custom-accent: #d3b091;
    --color-custom-cream: #f9f4ef;
    --color-custom-beige: #e8d5c4;
    --color-custom-sand: #d3b091; /* Matches accent */
    --color-custom-clay: #b07d62;
}

/* Base Styles */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll from background pattern */
    scroll-behavior: smooth; /* Smooth scroll for anchor links */
}

body {
    font-family: 'Inter', sans-serif;
    position: relative;
    background-color: var(--color-custom-cream);
    color: var(--color-custom-dark);
    line-height: 1.5;
}
a{
    text-decoration: none;
}
/* Headings and specific font styles */
h1,
h2,
h3{
    font-family: 'Playfair Display', serif;
    color: var(--color-custom-clay);
}
.font-playfair-display {
    padding-left:.5rem;
}
button:focus,button:focus-within {
  outline: 3px dashed var(--color-custom-clay);
}
a:focus,a:focus-within {
  outline: 3px dashed var(--color-custom-clay);
}
input:focus,input:focus-within {
  outline: 3px dashed var(--color-custom-clay);
}

/* Utility Classes for Layout and Spacing */
.container {
    max-width: 1280px; /* Equivalent to max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

@media (min-width: 768px) {
    .container {
        padding-left: 2rem; /* md:px-8 */
        padding-right: 2rem; /* md:px-8 */
    }
}

@media (min-width: 1024px) {
    .container-lg { /* For sections with wider padding */
        padding-left: 3rem; /* lg:px-12 */
        padding-right: 3rem; /* lg:px-12 */
    }
}


.flex-container {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

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

.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

.w-full {
    width: 100%;
}

.h-screen {
    height: 100vh;
}

.min-h-screen {
    min-height: 100vh;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-9999 {
    z-index: 9999;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.isolate {
    isolation: isolate;
}

/* Padding and Margin */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.-top-20 { top: -5rem; }

.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Widths and Heights */
.w-1\/2 { width: 50%; }
.lg-w-2\/5 { width: 40%; } /* Equivalent to lg:w-2/5 */
.lg-w-3\/5 { width: 60%; } /* Equivalent to lg:w-3/5 */
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-h-lg { max-height: 24rem; } /* equivalent to max-h-96 */
.max-h-screen { max-height: 100vh; }
.max-h-full { max-height: 100%; }
.max-h-90vh { max-height: 90vh; }
.max-w-90vw { max-width: 90vw; }
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-96 { height: 24rem; } /* 384px */


/* Typography */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.tracking-widest { letter-spacing: 0.1em; } /* tracking-widest */
.underline { text-decoration: underline; }

/* Colors */
.text-custom-dark { color: var(--color-custom-dark); }
.text-custom-light { color: var(--color-custom-light); }
.text-custom-accent { color: var(--color-custom-accent); }
.text-custom-cream { color: var(--color-custom-cream); }
.text-custom-beige { color: var(--color-custom-beige); }
.text-custom-sand { color: var(--color-custom-sand); }
.text-custom-clay { color: var(--color-custom-clay); }
.text-white { color: #fff; }
.text-gray-500 { color: #6b7280; }
.text-gray-700 { color: #374151; }
.text-blue-600 { color: #2563eb; }
.text-green-600 { color: #16a34a; }
.text-red-600 { color: #dc2626; }
.text-opacity-80 { opacity: 0.8; }


.bg-custom-dark { background-color: var(--color-custom-dark); }
.bg-custom-light { background-color: var(--color-custom-light); }
.bg-custom-accent { background-color: var(--color-custom-accent); }
.bg-custom-cream { background-color: var(--color-custom-cream); }
.bg-custom-beige { background-color: var(--color-custom-beige); }
.bg-custom-sand { background-color: var(--color-custom-sand); }
.bg-custom-clay { background-color: var(--color-custom-clay); }
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-black-80 { background-color: rgba(0, 0, 0, 0.8); } /* bg-opacity-80 */
.bg-cream-30 { background-color: rgba(var(--color-custom-cream-rgb), 0.3); } /* bg-custom-cream/30 */
.bg-beige-80 { background-color: rgba(var(--color-custom-beige-rgb), 0.8); } /* bg-custom-beige/80 */

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    --tw-gradient-stops: var(--tw-gradient-from, rgba(0,0,0,0.7)), var(--tw-gradient-to, transparent);
}


/* Borders */
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-dashed { border-style: dashed; }
.border-custom-beige { border-color: var(--color-custom-beige); }
.border-custom-clay { border-color: var(--color-custom-clay); }
.border-transparent { border-color: transparent; }

/* Rounded Corners */
.rounded-sm { border-radius: 0.125rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

/* Shadows */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }


/* Transitions & Transforms */
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-400 { transition-duration: 400ms; }

.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.hover-scale-105:hover { transform: scale(1.05); }


/* Hidden / Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; } /* explicit flex override for specific contexts */

/* Forms */
.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem; /* p-3 */
    border: 1px solid var(--color-custom-beige);
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    outline: none; /* focus:outline-none */
}

.form-input:focus {
    border-color: var(--color-custom-accent); /* focus:border-custom-accent */
    box-shadow: 0 0 0 1px var(--color-custom-accent); /* focus:ring-1 focus:ring-custom-accent */
}


/* Specific Component Styles */

/* Background pattern using a pseudo-element */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Place it behind the content */
    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%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 2.828 17.272 15.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.828V0h.284zM0 5.657l25.172 25.172-1.414 1.414L0 8.485v-2.83zm0 5.657l22.314 22.314-1.414 1.414L0 14.142v-2.83zm0 5.657l19.457 19.457-1.414 1.414L0 19.8v-2.83zm0 5.657l16.6 16.6-1.414 1.414L0 25.456v-2.83zm0 5.657l13.737 13.737-1.414 1.414L0 31.113v-2.83zm0 5.657l10.872 10.872-1.414 1.414L0 36.77v-2.83zm0 5.657l8.015 8.015-1.414 1.414L0 42.427v-2.83zm0 5.657l5.157 5.157-1.414 1.414L0 48.084v-2.83zm0 5.657l2.3 2.3-1.414 1.414L0 53.74v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.828V0h-.284zM60 5.657L34.828 30.828l1.414 1.414L60 8.485v-2.83zm0 5.657L37.686 33.656l1.414 1.414L60 14.142v-2.83zm0 5.657L40.543 35.113l1.414 1.414L60 19.8v-2.83zm0 5.657L43.4 35.656l1.414 1.414L60 25.456v-2.83zm0 5.657l-13.737 13.737 1.414 1.414L60 31.113v-2.83zm0 5.657l-10.872 10.872-1.414 1.414L60 36.77v-2.83zm0 5.657l-8.015 8.015-1.414 1.414L60 42.427v-2.83zm0 5.657l-5.157 5.157-1.414 1.414L60 48.084v-2.83zm0 5.657l-2.3 2.3-1.414 1.414L60 53.74v-2.83z' fill='%23d3b091' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 0.3;
}

/* Header styling for transparent and scrolled states */
.header-initial {
    background-color: rgba(var(--color-custom-cream-rgb), 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid rgba(var(--color-custom-cream-rgb), 0.3);
    box-shadow: none;
}

.header-scrolled {
    background-color: var(--color-custom-cream);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--color-custom-beige);
}

/* Navigation Links */
.nav-list {
    display: flex;
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    gap: 1rem; /* space-x-4 */
}
.nav-link{
    color: var(--color-custom-clay);
    font-size: 1.1rem;
    font-weight: 600;
}
h2{
        font-size: 2.25rem; 
    }

@media (max-width: 767px) {
    .nav-list {
        display: none; /* Hide desktop nav on mobile */
    }
    h2{
        font-size: 2rem; 
    }
}

@media (min-width: 768px) {
    .nav-list {
        gap: 1.5rem; /* md:space-x-6 */
    }
}

/* Mobile Navigation Toggle Button */
.mobile-menu-button {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-custom-clay);
    cursor: pointer;
    z-index: 30; /* Above header content */
    padding: 0.5rem;
}

@media (max-width: 767px) {
    .mobile-menu-button {
        display: block; /* Show hamburger on mobile */
    }
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-custom-cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 25; /* Below header, above page content */
    transform: translateX(100%); /* Start off-screen to the right */
    transition: transform 0.3s ease-in-out;
}

.mobile-menu-overlay.open {
    transform: translateX(0); /* Slide in */
}

.mobile-menu-overlay .nav-list-mobile {
    list-style: none;
    padding: 0;
    text-align: center;
}

.mobile-menu-overlay .nav-list-mobile li {
    margin-bottom: 1.5rem;
}

.mobile-menu-overlay .nav-list-mobile a {
    text-decoration: none;
    color: var(--color-custom-clay); /* Set color to clay */
    font-size: 1.8rem;
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

.mobile-menu-overlay .nav-list-mobile a:hover {
    color: var(--color-custom-accent);
}

/* Close button for mobile menu */
.mobile-menu-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: var(--color-custom-clay);
    cursor: pointer;
    z-index: 30;
}


/* Hero Section */
.hero-section {
    background-color: transparent; /* Matches body background */
    display: flex;
    position: relative;
    margin-top:6rem;
}

/* New class for controlling hero section layout responsiveness */
.hero-layout-container {
    display: flex;
    flex-direction: column-reverse; /* Default to column for small screens (text on top, image on bottom) */
    width: 100%; /* Ensure it takes full width for flex */
}

@media (min-width: 768px) { /* Medium breakpoint */
    .hero-layout-container {
        flex-direction: row-reverse; /* Switch to row-reverse to put image on left, text on right */
    }
    .hero-section{
        margin-top:0rem;
    }
}

.hero-content-left {
    text-align: center; /* Default for mobile (centered) */
    width: 100%;
}

@media (min-width: 768px) {
    .hero-content-left {
        text-align: left; /* Change to left for larger screens */
        width: 50%;
    }
    .lg-hero-content-left { /* Equivalent to lg:w-2/5 */
        width: 40%;
    }
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center; /* Centered for mobile */
}

@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .hero-buttons {
        justify-content: flex-start; /* Align buttons to the left on larger screens */
    }
}

.hero-button-primary {
    display: inline-block;
    background-color: var(--color-custom-clay);
    color: white;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.hero-button-primary:hover {
    background-color: var(--color-custom-accent);
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.hero-button-secondary {
    display: inline-block;
    border: 2px solid var(--color-custom-clay);
    color: var(--color-custom-clay);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.hero-button-secondary:hover {
    background-color: var(--color-custom-clay);
    border-color: var(--color-custom-accent);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}


.hero-image-column {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 3rem; /* py-12 */
    padding-bottom: 3rem; /* py-12 */
    width: 100%;
}

@media (min-width: 768px) {
    .hero-image-column {
        width: 50%;
        padding-top: 0; /* md:py-0 */
        padding-bottom: 0; /* md:py-0 */
        justify-content: flex-start; /* Align image to the left on larger screens */
    }
    .lg-hero-image-column { /* Equivalent to lg:w-3/5 */
        width: 60%;
    }
}

.hero-image-container {
    position: relative;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 32rem; /* max-w-lg */
    /* Removed direct border and shadow here, will be on ::before */
}

.hero-image-container::before {
    content: '';
    position: absolute;
    top: 1.5rem; /* Offset top */
    left: 1.5rem; /* Offset left */
    width: calc(100% - 1rem); /* Adjust width to fit */
    height: calc(100% - 1rem); /* Adjust height to fit */
    border: 2px solid var(--color-custom-sand); /* Applied border here */
    border-radius: 0.75rem; /* Match image container border-radius */
    z-index: -1; /* Place behind the image */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 0 20px rgba(var(--color-custom-accent-rgb), 0.15); /* Shadow for the offset border */
    transition: all 0.3s ease-in-out; /* Smooth transition for potential hover effects */
}

/* Optional: Add hover effect to the offset border */
.hero-image-container:hover::before {
    top: 0.25rem; /* Slightly reduced hover offset */
    left: 0.25rem; /* Slightly reduced hover offset */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 0 25px rgba(var(--color-custom-accent-rgb), 0.2);
}


.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.75rem; /* rounded-xl */
}

.hero-info-box {
    position: absolute;
    bottom: 1rem; /* Adjusted from 0 */
    right: 1rem; /* Adjusted from 0 */
    background-color: white;
    border: 1px solid #ddd;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-custom-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    z-index: 10;
    animation: info-float 6s ease-in-out infinite;
}

@media (max-width: 767px) {
    .hero-info-box {
        bottom: 20px;
        right: 10px;
        transform: translateX(0);
    }
}

/* Featured Galleries Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
    }
}

.gallery-link {
    display: block;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    text-decoration: none;
}

.gallery-link:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: scale(1.05);
}

.gallery-card-inner {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: var(--color-custom-dark); /* bg-custom-dark */
}

.gallery-cover-img {
    width: 100%;
    height: 24rem; /* h-96 */
    object-fit: cover;
    border-radius: 0.5rem; /* rounded-lg */
    transition: opacity 0.3s ease-in-out;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem; /* p-6 */
    text-align: left;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.gallery-link:hover .gallery-overlay {
    opacity: 1;
}

.gallery-title {
    color: white;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
}

.gallery-description {
    color: white;
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 0.5rem; /* mb-2 */
}

.gallery-view-link {
    color: var(--color-custom-accent);
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
}

.gallery-view-link:hover {
    text-decoration: underline;
}


/* About Section */
.about-section {
    color: var(--color-custom-dark); /* text-custom-light was used but custom-dark makes more sense */
}

.about-content-wrapper {
    display: flex;
    flex-direction: column; /* Default to column for mobile */
    align-items: center;
    gap: 3rem; /* gap-12 */
}

@media (min-width: 768px) {
    .about-content-wrapper {
        flex-direction: row; /* Change to row for desktop */
    }
    .about-image-col, .about-text-col {
        width: 50%;
    }
}


.about-image-container {
    position: relative; /* Added for pseudo-element positioning */
    border-radius: 0.75rem; /* rounded-xl */
}

.about-image-container::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    border: 2px solid var(--color-custom-sand);
    border-radius: 0.75rem;
    z-index: -1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease-in-out;
}
/* Optional: Add hover effect to the offset border */
.about-image-container:hover::before {
    top: 0.25rem; /* Slightly reduced hover offset */
    left: 0.25rem; /* Slightly reduced hover offset */
    box-shadow: 0 25px 30px rgba(0, 0, 0, 0.15), 0 12px 12px rgba(0, 0, 0, 0.08);
}


.about-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* New: Reduce about image height on larger screens */
@media (min-width: 768px) {
    .about-image {
        max-height: 600px; /* Adjusted as requested */
        width: 100%; /* Allow width to adjust based on height for better aspect ratio control */
        margin-left: auto; /* Center if width is less than container */
        margin-right: auto; /* Center if width is less than container */
    }
}


.about-subtitle {
    font-size: 1.125rem; /* text-lg */
    text-transform: uppercase;
    letter-spacing: 0.1em; /* tracking-widest */
    margin-bottom: 1rem; /* mb-4 */
}

.about-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    line-height: 1.25; /* leading-tight */
    margin-bottom: 1.5rem; /* mb-6 */
    color: var(--color-custom-clay);
}

@media (min-width: 768px) {
    .about-title {
        font-size: 3rem; /* md:text-5xl */
    }
}

.about-paragraph {
    font-size: 1rem; /* text-base */
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: 1rem; /* mb-4 */
}

@media (min-width: 768px) {
    .about-paragraph {
        font-size: 1.125rem; /* md:text-lg */
    }
}


/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
    }
}

.service-card {
    background-color: var(--color-custom-light);
    padding: 2rem; /* p-8 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.service-card:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* hover:shadow-2xl */
}

.service-icon {
    color: var(--color-custom-clay);
    margin-bottom: 1rem; /* mb-4 */
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    margin-left: auto;
    margin-right: auto;
}

.service-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: var(--color-custom-clay);
    margin-bottom: 1rem; /* mb-4 */
}

.service-description {
    color: var(--color-custom-dark);
    opacity: 0.8;
    line-height: 1.625; /* leading-relaxed */
}

/* Testimonials Section */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
    }
}

.testimonial-card {
    background-color: rgba(var(--color-custom-beige-rgb), 0.8); /* bg-custom-beige/80 */
    padding: 2rem; /* p-8 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.testimonial-card:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* hover:shadow-2xl */
}

.testimonial-quote {
    color: var(--color-custom-dark);
    font-style: italic;
    margin-bottom: 1rem; /* mb-4 */
    font-size: 1.125rem; /* text-lg */
}

.testimonial-author {
    color: var(--color-custom-clay);
    font-weight: 600; /* font-semibold */
    font-size: 1.25rem; /* text-xl */
}

/* CTA Section */
.cta-section {
    background-color: var(--color-custom-accent);
    color: white;
    text-align: center;
}

.cta-heading {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: var(--color-custom-cream);
    margin-bottom: 1.5rem; /* mb-6 */
}

@media (min-width: 768px) {
    .cta-heading {
        font-size: 3rem; /* md:text-5xl */
    }
}

.cta-description {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 2rem; /* mb-8 */
    max-width: 42rem; /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .cta-description {
        font-size: 1.25rem; /* md:text-xl */
    }
}

.cta-button {
    background-color: var(--color-custom-beige);
    color: var(--color-custom-clay);
    padding: 1rem 2.5rem; /* px-10 py-4 */
    border-radius: 9999px; /* rounded-full */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    transition: all 0.3s ease-in-out;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    text-decoration: none;
}

.cta-button:hover {
    background-color: var(--color-custom-clay);
}


/* Contact Form Section */
.contact-form-section {
    color: var(--color-custom-clay);
}

.contact-form-card {
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-custom-beige);
    padding: 2rem; /* p-8 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.contact-form-group {
    margin-bottom: 1.5rem; /* space-y-6 */
}

.contact-form-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: var(--color-custom-clay);
}

.contact-form-input {
    margin-top: 0.25rem; /* mt-1 */
    display: block;
    width: 100%;
    padding: 0.75rem; /* p-3 */
    border: 1px solid var(--color-custom-beige);
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    outline: none; /* focus:outline-none */
}

.form-input:focus {
    border-color: var(--color-custom-accent); /* focus:border-custom-accent */
    box-shadow: 0 0 0 1px var(--color-custom-accent); /* focus:ring-1 focus:ring-custom-accent */
}

.contact-form-textarea {
    min-height: 6rem; /* rows-6 */
}


.contact-submit-button {
    width: 100%;
    background-color: var(--color-custom-accent);
    color: white;
    padding: 0.75rem 2rem; /* px-8 py-3 */
    border-radius: 9999px; /* rounded-full */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    transition: background-color 0.3s ease-in-out;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.contact-submit-button:hover {
    background-color: var(--color-custom-clay);
}


/* Footer Section */
.footer-section {
    background-color: var(--color-custom-clay);
    color: var(--color-custom-light);
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem; /* py-8 */
    text-align: center;
}

.footer-copyright {
    font-size: 1.125rem; /* text-lg */
}

.footer-designer-info {
    font-size: 0.875rem; /* text-sm */
    margin-top: 0.5rem; /* mt-2 */
}

/* Scroll Down Indicator with new animation */
.scroll-down-indicator {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--color-custom-dark);
}

.scroll-down-icon {
    animation: scrollBounce 1.5s infinite ease-in-out;
}

@keyframes scrollBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Gradient Circles */
.gradient-circle {
    position: absolute;
    border-radius: 9999px;
    opacity: .3;
    filter: blur(24px); /* tailwind blur-xl */
    animation: float 6s ease-in-out infinite;
    z-index: -1;
}

.circle-1 {
    width: 40vw;
    height: 40vw;
    top: -10vw;
    right: -10vw;
    background: linear-gradient(45deg, #f8d0b0, #f2c1a0);
    animation: float 6s ease-in-out infinite, rotate-slow 20s linear infinite;
}

.circle-2 {
    width: 25vw;
    height: 25vw;
    bottom: 5vw;
    left: -5vw;
    background: linear-gradient(45deg, #ebcdba, #e8b896);
    animation-delay: 1s;
}

/* New animation for slow rotation */
@keyframes rotate-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes float {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10%, 20%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes info-float {
    0% {
        transform: translate(0, 0); /* Adjusted for new positioning */
    }

    50% {
        transform: translate(5%, 5%); /* Slightly more subtle float for new position */
    }

    100% {
        transform: translate(0, 0);
    }
}

/* Sparkle Icon styling */
.subheading-with-icon {
    display: flex;
    align-items: center;
    justify-content: center; /* Centered for mobile */
}
@media (min-width: 768px) {
    .subheading-with-icon {
        justify-content: flex-start; /* Left-aligned for desktop */
    }
}
.sparkle-icon {
    width: 1.5rem; /* Smaller size */
    height: 1.5rem; /* Smaller size */
    margin-right: 0.5rem; /* Space between icon and text */
    animation: float 4s ease-in-out infinite;
}



/* Masonry-like layout for galleries */
.masonry-grid {
    column-count: 1;
    column-gap: 1rem;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out; /* Add transition for hover effect */
}

.masonry-item img:hover {
    transform: scale(1.05); /* Example hover effect */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

/* Responsive column count for masonry grid */
@media (min-width: 640px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-grid {
        column-count: 3;
    }
}

@media (min-width: 1280px) {
    .masonry-grid {
        column-count: 4;
    }
}


/* Lightbox */
#lightbox-modal {
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
}

#lightbox-close {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 0.5rem;
    border-radius: 9999px;
    cursor: pointer;
    z-index: 10000;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 2rem;
}

#lightbox-close:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 1rem;
    border-radius: 9999px;
    cursor: pointer;
    z-index: 10000;
    transition: background-color 0.2s ease-in-out;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 2rem;
}

.lightbox-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

#lightbox-prev {
    left: 20px;
}

#lightbox-next {
    right: 20px;
}

#lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
}

/* Lucide Icons */
.lucide {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    stroke-width: 2;
    stroke: var(--color-custom-clay);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}