/* =============================
   HOOKED MENU (Sticky Header) TOGGLE
   ============================= */
:root {
  --hooked-menu: 1; /* 1 = sticky ON, 0 = sticky OFF */

}

body[data-hooked="0"] .site-header {
  position: relative !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

.header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}


@media (max-width: 576px) {
    .header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

    .header-contact-icons a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


@font-face {
    font-family: 'The Seasons'; /* Name to use in your CSS */
    src: url('https://artisanatdesignstudio.in/fonts/Theseasonsreg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {
    --theme-primary: #5C3D2E; /* Dark Brown - new primary action color */
    --theme-accent: #926B5B; /* Brown for accents/hover */
    --dark-background: #5C3D2E; /* Dark Brown for body/header background */
    --light-background: #D9C9C1; /* Light Beige/Cream for overall light sections */
    --card-background: #FFFFFF; /* White for cards and lighter elements */
    --text-dark: #333; /* Darker text for readability on light backgrounds */
    --text-light: #6A5F56; /* Grayish Brown secondary text */
    --text-on-dark: #FFFFFF; /* Text color for dark backgrounds */
    scroll-padding-top: 120px;
}

/* @font-face rules for custom fonts */
@font-face {
    font-family: 'Safira March'; /* Name to use in your CSS */
    src: url('https://artisanatdesignstudio.in/fonts/SafiraMarch.woff') format('woff'); /* Updated to Safira March.woff */
    src: url('https://artisanatdesignstudio.in/fonts/SafiraMarch.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Glacial Indifference'; /* Name to use in your CSS */
    src: url('https://artisanatdesignstudio.in/fonts/GlacialIndifferenceRegular.woff2') format('woff2'); /* Updated to GlacialIndifference-Regular.woff2 */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Glacial Indifference', 'Inter', sans-serif; /* Use Glacial Indifference as primary, Inter as fallback */
    background-color: var(--dark-background);
    color: var(--text-on-dark);
}

header {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background-color: var(--light-background); /* Updated for nav bar background */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    /* Added for the line separator */
    position: relative; /* Ensure pseudo-element positions correctly */
}

/* Line separator for the main header */
header::after {
    content: '';
    display: block;
    width: 80px; /* Small width */
    height: 2px; /* Thin line */
    background-color: var(--light-background); /* Beige color */
    position: absolute;
    bottom: 0; /* At the bottom of the header */
    left: 50%;
    transform: translateX(-50%); /* Center it */
}


.header-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    max-height: none;
}
.navbar-brand-text {
    font-family: 'The Seasons', sans-serif; /* Apply Safira March font */
    color: var(--theme-primary); /* Use your primary theme color for the text */
    font-size: 2.2rem; /* Adjust font size as needed */
    text-decoration: none; /* Remove underline */
    white-space: nowrap; /* Prevent text from wrapping */
    padding: 0;
    margin: 0;
    line-height: 1; /* Adjust line height to prevent extra space */
}

/* You might want to adjust the header padding if the text is much larger than the old logo */
header {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background-color: var(--light-background);
    padding-top: 0.75rem; /* Adjust as needed */
    padding-bottom: 0.75rem; /* Adjust as needed */
}

/* Remove or modify the .header-logo rule as it's no longer used */
.header-logo {
    display: none; /* Hide the image if it's still present for any reason */
}

/* Adjustments for smaller screens if necessary */
@media (max-width: 991.98px) {
    .navbar-brand-text {
        font-size: 1.8rem; /* Smaller font size on mobile */
    }
}

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

.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.navbar-nav .nav-item .nav-link {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-primary); /* Updated for dark brown text */
    text-decoration: none;
    padding: 10px 15px;
    transition: all 0.3s ease;
    display: inline-block;
    border-bottom: 2px solid transparent;
    font-family: 'Glacial Indifference', sans-serif; /* Apply Glacial Indifference to nav links */
}

.navbar-nav .nav-item .nav-link:hover {
    color: var(--text-light); /* Updated for light color text on hover */
    border-bottom: 2px solid var(--text-light); /* Updated for light color border on hover */
}

@media (max-width: 991.98px) {
    .navbar-nav {
        flex-direction: column;
        text-align: center;
    }
    .navbar-nav .nav-item {
        margin: 5px 0;
    }
    .navbar-nav .nav-item .nav-link {
        padding: 8px 15px;
        border-bottom: none;
    }
    .navbar-nav .nav-item .nav-link:hover {
        border-bottom: none;
    }
}

.hero-title {
  font-family: 'TheSeasons', serif;
}

.hero-section-custom {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-on-dark);
    position: relative;
    background-color: var(--dark-background);
    overflow: hidden;
}

.hero-section-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.hero-content-custom {
    z-index: 3;
    padding: 2rem;
    border-radius: 0.75rem;
    background-color: rgba(0, 0, 0, 0.2);
}

.hero-section-custom a.btn-primary {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--text-on-dark);
    font-family: 'Glacial Indifference', sans-serif; /* Apply to buttons */
}

.hero-section-custom a.btn-primary:hover {
    background-color: var(--dark-background);
    border-color: var(--dark-background);
}
/* Hero Section Button Hover Effect */
.hero-section-custom a.btn-primary {
    background-color: var(--theme-primary); /* Dark Brown */
    border-color: var(--theme-primary); /* Dark Brown */
    color: var(--text-on-dark); /* White */
    font-family: 'Glacial Indifference', sans-serif;
    transition: all 0.3s ease; /* Smooth transition for all changes */
}

.hero-section-custom a.btn-primary:hover {
    background-color: var(--theme-accent); /* Brown for accents/hover */
    border-color: var(--theme-accent); /* Brown for accents/hover */
    transform: translateY(-3px); /* Slightly lift the button */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

/* Parallax preparation for hero collage background */
.hero-collage-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 5px;
    overflow: hidden;
    z-index: 1;
    transform: translateZ(0); /* Ensure hardware acceleration */
}

.hero-collage-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%) brightness(80%);
    transition: filter 0.3s ease;
    will-change: transform; /* Optimize for transform changes */
}

/* CSS for the Hero section image collage background */
.hero-collage-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 3px;
    overflow: hidden;
    z-index: 1;
}

.hero-collage-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%) brightness(80%);
    transition: filter 0.3s ease;
}

.hero-collage-background img:hover {
    filter: grayscale(0%) brightness(100%);
}

@media (max-width: 768px) {
    .hero-collage-background {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-gap: 3px;
    }
}





/* About Section Collage */
/* About Section Collage */
.about-collage-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 15px;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(145deg, var(--card-background), var(--light-background));
    overflow: hidden;
    min-height: 700px;
}

/* General image styles */
.about-collage-container img {
    display: block;
    width: 45%;
    height: 45%;
    object-fit: cover;
    border-radius: 2rem 0 2rem 0;
    z-index: 2;

    /* initial hidden */
    opacity: 0;
    transform: scale(0.9) translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Bounce animation when visible */
.about-collage-container img.in-view {
    opacity: 1;
    transform: none;
    animation: bounceIn 0.9s ease forwards;
}

@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.9) translateY(40px); }
    60%  { opacity: 1; transform: scale(1.05) translateY(-10px); }
    80%  { transform: scale(0.97) translateY(5px); }
    100% { transform: scale(1) translateY(0); }
}

/* Desktop collage positioning */
.about-collage-container img:nth-child(1) { position: absolute; top: 5%; left: 5%; z-index: 5; }
.about-collage-container img:nth-child(2) { position: absolute; top: 5%; right: 5%; z-index: 4; }
.about-collage-container img:nth-child(3) { position: absolute; bottom: 5%; left: 5%; z-index: 6; }
.about-collage-container img:nth-child(4) { position: absolute; bottom: 5%; right: 5%; z-index: 3; }
.about-collage-container img:nth-child(5) { display: none; }

/* Tablet */
@media (max-width: 768px) {
    .about-collage-container {
        padding: 10px;
        min-height: 550px;
    }
    .about-collage-container img {
        width: 48%;
        height: 48%;
    }
    .about-collage-container img:nth-child(1) { top: 2%; left: 2%; }
    .about-collage-container img:nth-child(2) { top: 2%; right: 2%; }
    .about-collage-container img:nth-child(3) { bottom: 2%; left: 2%; }
    .about-collage-container img:nth-child(4) { bottom: 2%; right: 2%; }
}




/* Mobile: 2x2 grid clean layout */




















section h2,
.card-title,
.card h3 {
    color: var(--theme-primary); /* Applied to headings and subheadings */
    font-family: 'The Seasons', sans-serif; /* Apply Safira March to headings */
}
section h2 {
    position: relative; /* Needed for positioning the pseudo-element */
    padding-bottom: 15px; /* Add space for the line */
    margin-bottom: 25px; /* Increase margin to separate from content below */
}

section h2::after {
    content: '';
    display: block;
    width: 80px; /* Small width for the line */
    height: 2px; /* Thin line */
    background-color: var(--light-background); /* Beige color */
    position: absolute;
    bottom: 0; /* Position at the bottom of the h2 */
    left: 50%;
    transform: translateX(-50%); /* Center the line */
    border-radius: 1px; /* Slightly rounded ends for the line */
}

.card {
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--card-background);
    color: var(--text-dark);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(92, 61, 46, 0.15); /* Adjusted to new theme primary */
}

/* Updated styles for projects section */
.project-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.project-item video {
    transition: transform 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-item:hover video {
    transform: scale(1.05);
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-on-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 0.75rem;
}

.project-item:hover .project-overlay {
    opacity: 1;
}

/* Horizontal scroll container for projects */
.projects-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden; /* Changed to hidden to remove the scrollbar */
    gap: 32px; /* Spacing between video cards */
    scroll-snap-type: x mandatory;
    padding-bottom: 16px; /* Space for scrollbar (kept for consistency but scrollbar is hidden) */
    /* Removed scrollbar-width and scrollbar-color as overflow-x is hidden */
}

/* Optional: Custom scrollbar for Webkit browsers (removed as overflow-x is hidden) */
.projects-scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Webkit browsers */
}

/* Ensure each project card takes up appropriate space and doesn't shrink */
.projects-scroll-container > .col-12.col-md-6.col-lg-4 {
    flex: 0 0 auto;
    width: 1280px; /* Increased width for video cards to 1280px */
    height: 720px; /* Set height for video cards to 720px */
    max-width: 98%; /* Ensure cards are responsive on smaller screens, slightly increased */
    scroll-snap-align: start;
}

/* Media query to ensure cards are still responsive on very small screens if needed */
@media (max-width: 576px) {
    .projects-scroll-container > .col-12.col-md-6.col-lg-4 {
        width: 320px; /* Adjust for very small screens */
        height: 180px; /* Adjust height proportionally for very small screens (16:9 aspect ratio) */
    }
}
/* Project Section Styles */
.projects-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto; /* Center the carousel wrapper */
    overflow: hidden; /* Hide overflow outside the scroll container */
}

/* Horizontal scroll container for projects */
.projects-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll; /* Changed to scroll to enable programmatic scrolling */
    -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
    scroll-behavior: smooth; /* Smooth scroll when clicking arrows */
    gap: 32px; /* Spacing between video cards */
    scroll-snap-type: x mandatory;
    padding-bottom: 16px; /* Space for scrollbar (kept for consistency but scrollbar is hidden via custom styles) */
    scrollbar-width: none; /* Firefox: Hide scrollbar */
}

/* Custom scrollbar for Webkit browsers (Chrome, Safari) */
.projects-scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

/* Ensure each project card takes up appropriate space and doesn't shrink */
.projects-scroll-container > .col-12.col-md-6.col-lg-4 {
    flex: 0 0 auto;
    width: 1280px; /* Increased width for video cards to 1280px */
    height: 720px; /* Set height for video cards to 720px */
    max-width: 98%; /* Ensure cards are responsive on smaller screens, slightly increased */
    scroll-snap-align: start;
}

/* Media query to ensure cards are still responsive on very small screens if needed */
@media (max-width: 576px) {
    .projects-scroll-container > .col-12.col-md-6.col-lg-4 {
        width: 320px; /* Adjust for very small screens */
        height: 180px; /* Adjust height proportionally for very small screens (16:9 aspect ratio) */
    }
}

/* Carousel Navigation Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(92, 61, 46, 0.7); /* Dark Brown with transparency */
    color: var(--text-on-dark); /* White text */
    border: none;
    border-radius: 50%; /* Circular shape */
    width: 50px;
    height: 50px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-arrow:hover {
    background-color: var(--theme-accent); /* Lighter brown on hover */
    transform: translateY(-50%) scale(1.05); /* Slight scale up on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

.carousel-arrow:active {
    transform: translateY(-50%) scale(0.95); /* Slight press effect */
}

.carousel-arrow.left-arrow {
    left: 10px;
}

.carousel-arrow.right-arrow {
    right: 10px;
}

/* Hide arrows on very small screens if they interfere with touch scrolling */
@media (max-width: 768px) {
    .carousel-arrow {
        display: none;
    }
    /* Ensure scroll container is still scrollable by touch */
    .projects-scroll-container {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
}
/* New CSS for Video Aspect Ratio and Styling */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (height / width = 9 / 16 = 0.5625 or 56.25%) */
    height: 0;
    overflow: hidden;
    border-top-left-radius: 0.75rem; /* Match card-img-top rounded corners */
    border-top-right-radius: 0.75rem; /* Match card-img-top rounded corners */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the container without distortion */
}

/* Adjust card image top for video container */
.card .card-img-top {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
/* Projects Section Video Play Button */
.video-container {
    position: relative; /* Essential for positioning the overlay */
    width: 100%;
    height: 100%; /* Or a fixed height if needed */
    overflow: hidden; /* Ensures play button doesn't overflow */
    display: flex; /* To center the play button using flexbox */
    justify-content: center;
    align-items: center;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers the container without distortion */
}

.play-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
    cursor: pointer;
    z-index: 1; /* Ensure it's above the video but below controls if they appear */
}

.video-container:hover .play-button-overlay {
    opacity: 1; /* Show on hover */
}

.play-button-overlay i {
    color: white; /* Color of the play icon */
    font-size: 3rem; /* Size of the play icon */
    opacity: 0.8; /* Slightly transparent icon */
    transition: transform 0.3s ease;
}

.play-button-overlay:hover i {
    transform: scale(1.1); /* Slightly enlarge icon on hover */
    opacity: 1; /* Make icon fully opaque on hover */
}

/* Hide default video controls when the custom play button is active */
/* No CSS needed here since the overlay already covers the video controls visually.
    If you want to hide native controls when overlay is active, use JS to remove the 'controls' attribute.
    No empty ruleset is needed. */

/* Adjust card body to avoid overlap if necessary */
.project-item .card-body {
    position: relative;
    z-index: 2; /* Ensure text is above the video and overlay if they were to overlap */
}

#message {
    resize: none;
}

/* NEW Aesthetic Contact Section Styling - Replaces old .contact-section */
.aesthetic-contact-section {
    background: linear-gradient(135deg, var(--light-background) 0%, var(--dark-background) 100%);
    color: var(--text-dark);
    padding: 80px 0;
}

.aesthetic-contact-section .section-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--theme-primary);
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 15px;
    font-family: 'The Seasons', sans-serif; /* Apply Safira March to contact section title */
}

.aesthetic-contact-section .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--theme-accent);
    border-radius: 2px;
}
/* Styles for the Services Section to make cards scrollable */
.services-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 32px;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent) var(--light-background);
}

/* Optional: Custom scrollbar for Webkit browsers */
.services-scroll-container::-webkit-scrollbar {
    height: 10px;
}
.services-scroll-container::-webkit-scrollbar-thumb {
    background: var(--theme-accent);
    border-radius: 8px;
}
.services-scroll-container::-webkit-scrollbar-track {
    background: var(--light-background);
    border-radius: 8px;
}

/* Ensure each service card takes up appropriate space and doesn't shrink */
.services-scroll-container > .col-12.col-md-6.col-lg-4 {
    flex: 0 0 auto;
    width: 420px; /* Increased width for video cards */
    max-width: 98%; /* Ensure cards are responsive on smaller screens, slightly increased */
    scroll-snap-align: start;
}

/* Media query to ensure cards are still responsive on very small screens if needed */
@media (max-width: 576px) {
    .services-scroll-container > .col-12.col-md-6.col-lg-4 {
        width: 320px; /* Adjust for very small screens */
    }
}


/* Card Styling for Form and Info within aesthetic contact section */
.contact-form-card,
.contact-info-card {
    background-color: var(--card-background);
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-card:hover,
.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.1);
}

/* Form Input Styling within aesthetic contact section */
.aesthetic-contact-section .form-control {
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--text-dark);
    background-color: #fcfcfc;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Glacial Indifference', sans-serif; /* Apply to form inputs */
}

.aesthetic-contact-section .form-control:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.25rem rgba(92, 61, 46, 0.25); /* Adjusted to new theme primary */
    outline: none;
}

.aesthetic-contact-section .form-label {
    font-weight: 500;
    color: var(--theme-primary);
    margin-bottom: 0.5rem;
    font-family: 'Glacial Indifference', sans-serif; /* Apply to form labels */
}

/* Custom Button Styling within aesthetic contact section */
.btn-primary-custom {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--text-on-dark);
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.8rem 1.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    font-family: 'Glacial Indifference', sans-serif; /* Apply to custom buttons */
}

.btn-primary-custom:hover {
    background-color: var(--theme-accent); /* Adjusted to new theme accent */
    border-color: var(--theme-accent); /* Adjusted to new theme accent */
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.btn-primary-custom:active {
    transform: translateY(0);
}

/* Contact Details Styling within aesthetic contact section */
/* Contact Details Styling within aesthetic contact section */
.contact-details {
    padding-left: 0;
}

.contact-details li {
    display: flex;
    align-items: center; /* center icon and text vertically */
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-light);
    font-family: 'Glacial Indifference', sans-serif;
    font-weight: normal; /* keep text unbold */
}

.contact-details .icon {
    font-size: 1.5rem;
    color: var(--theme-accent);
    flex-shrink: 0;
    width: 30px; 
    text-align: center;
}

.contact-details li span {
    margin-left: 10px; /* ✅ forces spacing between icon and text */
    display: inline-block;
}





/* Map Container Styling within aesthetic contact section */
.map-container-contact {
    height: 300px;
    border: 2px solid #ddd;
    border-radius: 0.75rem;
    overflow: hidden;
}

.map-container-contact iframe {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    border: 0;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.delay-1 { transition-delay: 0.1s; }
.fade-in.delay-2 { transition-delay: 0.2s; }
.fade-in.delay-3 { transition-delay: 0.3s; }

/* Footer Styling */
.footer {
    background-color: var(--dark-background);
    color: var(--text-on-dark);
    padding: 40px 20px 20px;
    font-family: 'Glacial Indifference', sans-serif; /* Apply to footer text */
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
    gap: 40px;
}

.footer-column {
    flex: 1 1 200px;
    min-width: 200px;
}

.footer-column h4 {
    margin-bottom: 15px;
    font-size: 18px;
    border-bottom: 1px solid var(--text-light); /* Adjusted to grayish brown */
    padding-bottom: 8px;
    font-family: 'Safira March', Palatino Linotype, 'Book Antiqua', serif; /* Apply Safira March to footer headings */
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
    font-size: 14px;
}

/* Footer Quick Links */
.footer-column ul li a {
    color: #f7f1f1;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease; /* Add padding-left to transition */
    font-family: 'Glacial Indifference', sans-serif; /* Apply to footer links */
    position: relative; /* Needed for absolute positioning of pseudo-element */
    padding-left: 15px; /* Create space for the arrow */
    display: inline-block; /* Allows padding-left to work correctly */
}

.footer-column ul li a::before {
    content: '>'; /* The arrow character */
    position: absolute;
    left: 0; /* Position it at the start of the padding */
    color: var(--text-light); /* Initial color for the arrow (e.g., a lighter grey) */
    transition: color 0.3s ease, transform 0.3s ease; /* Transition for arrow color and movement */
}

.footer-column ul li a:hover {
    color: var(--theme-accent); /* Change link text color on hover */
    padding-left: 20px; /* Increase padding on hover to move the text */
}

.footer-column ul li a:hover::before {
    color: var(--text-on-dark); /* Change arrow color to white on hover */
    transform: translateX(5px); /* Move the arrow slightly to the right on hover */
}

/* Ensure the list items themselves don't have extra padding that pushes the arrow */
.footer-column ul li {
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0; /* Remove default padding if any */
}

.logo-column .footer-logo {
    width: 150px;
    margin-bottom: 10px;
}

.footer-column p {
    font-size: 14px;
    color: #d3d3d3;
}

.social-icons a {
    color: #fffdfd;
    margin-right: 10px;
    font-size: 18px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--text-on-dark);
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    font-size: 13px;
    color: #aaa9a9;
    border-top: 1px solid var(--text-light); /* Adjusted to grayish brown */
    padding-top: 20px;
}

.map-container {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 200px;
    margin-top: 10px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    border: 0;
}

@media (max-width: 991.98px) {
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .nav-links.show {
        display: flex;
    }
    .nav-links li {
        width: 100%;
        text-align: left;
        margin: 10px 0;
    }
}

.call-button {
    background: linear-gradient(135deg, #5C3D2E, #8B5A3C);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
}

.call-button:hover {
    background: linear-gradient(135deg, #8B5A3C, #5C3D2E);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.logo-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #888; /* Adjust as needed */
    margin-top: 0.5rem;
}

.card-img-top {
  height: 250px;
  object-fit: cover;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.hero-video-section {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.hero-overlay h1,
.hero-overlay p {
  color: #fff;
}

.hero-overlay .btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #fff;
}

.hero-overlay .btn-primary:hover {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

#tour iframe {
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

#tour iframe {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card-img-top {
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.card {
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}


video {
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}


.project-card h5 {
  transition: color 0.3s ease;
}

.project-card:hover h5 {
  color: #7c4dff; /* Accent color on hover */
}

.project-card iframe {
  border-radius: 12px;
}



.logo-img {
  height: 90px !important;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0;
  padding: 0;
}




.header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

@media (max-width: 991.98px) {
  .logo-img {
    max-height: 48px;
  }
}

/* Better looking nav links */
.navbar-nav .nav-link {
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  color: #333;
  transition: all 0.3s ease;
  border-radius: 0.25rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  background-color: #f0f0f0;
  color: #000;
  text-decoration: none;
}

.navbar-collapse {
  transition: all 0.3s ease;
}

header {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}


@media (max-width: 768px) {
  .logo-img {
    height: 40px !important;  /* or increase to 44px if needed */
  }
}
/* Three-column header layout */
.header-layout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

/* Center the contact section in the middle column */
.header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Stack layout on mobile */
@media (max-width: 991.98px) {
    .header-layout {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
    }
    .header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
}

/* Prevent sticky header from covering contact section */
#contact {
    scroll-margin-top: 100px;
}

/* Header nav links - sleeker look */
.navbar-nav .nav-link {
    font-size: 0.95rem; /* slightly smaller */
    font-weight: 500; /* medium weight */
    letter-spacing: 0.3px;
}

/* Larger logo on mobile */
@media (max-width: 991.98px) {
    .navbar-brand img.logo-img {
        max-height: 50px; /* increase from default */
    }
}

/* Smaller call/WhatsApp buttons on mobile */
@media (max-width: 991.98px) {
    .header-contact-icons .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Ensure Get in Touch section is visible */
#contact {
    scroll-margin-top: 120px; /* more space so header doesn't cover */
    padding-top: 2rem; /* extra breathing room */
}

/* Add space between WhatsApp button and menu */
.header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Lighter nav font */
.navbar-nav .nav-link {
    font-weight: 400; /* lighter than before */
}

/* Smaller Call/WhatsApp buttons on desktop */
@media (min-width: 992px) {
    .header-contact-icons .btn {
        padding: 0.45rem 0.9rem;
        font-size: 0.9rem;
    }
}

/* Ensure Get in Touch section is visible */
#contact {
    scroll-margin-top: 160px; /* match sticky header height */
    padding-top: 2.5rem; /* extra breathing room */
}

/* Modern hover effect for nav links */
.navbar-nav .nav-link {
    position: relative;
    transition: color 0.25s ease;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    background-color: currentColor;
    transition: all 0.25s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover {
    color: #ffc107; /* change this to your accent color */
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* Smooth scrolling and fix header overlap */
html {
  scroll-behavior: smooth;
}

#contact {
  scroll-margin-top: 110px; /* Matches header height */
}

/* Ensure fade-in sections are visible if JS fails */
.fade-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile logo size fix */
@media (max-width: 768px) {
    .logo-img {
        max-height: 55px; /* bigger logo */
        width: auto;
    }

    /* Keep Call and WhatsApp buttons side by side */
    .header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

    .header-contact-icons a {
        flex: 1; /* make both buttons evenly spaced */
        font-size: 14px;
        padding: 6px 10px;
    }
}

/* Match 360° tour section curve to 1 BHK section */
#tour .ratio iframe {
    border-radius: 0.25rem !important; /* same as .rounded */
}

.about-collage-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: auto;
    border-radius: 0.5rem;
    overflow: hidden;
}

.about-collage-container img {
    position: absolute;
    width: 48%;
    border-radius: 0.5rem;
    transition: transform 0.5s ease;
}

/* Positions like original collage */
.about-collage-container .img1 { top: 0; left: 0; }
.about-collage-container .img2 { top: 0; right: 0; }
.about-collage-container .img3 { bottom: 0; left: 0; }
.about-collage-container .img4 { bottom: 0; right: 0; }

/* Animation keyframes */
@keyframes pullToCenter {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(-10%, -10%); }
    100% { transform: translate(0,0); }
}

/* Variations for each corner to pull towards center */
.about-collage-container.animate .img1 {
    animation: pullToCenter 0.8s ease forwards;
}
.about-collage-container.animate .img2 {
    animation: pullToCenter 0.8s ease forwards;
    animation-delay: 0.05s;
}
.about-collage-container.animate .img3 {
    animation: pullToCenter 0.8s ease forwards;
    animation-delay: 0.1s;
}
.about-collage-container.animate .img4 {
    animation: pullToCenter 0.8s ease forwards;
    animation-delay: 0.15s;
}

.about-collage-frame {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 4/3; /* keeps proportions */
  border-radius: 2rem; /* softer corners like before */
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px rgba(15, 15, 15, 0.12);
  background: #faf9f7;
}
.about-collage-container .collage-img {
  border-radius: 1.5rem; /* match inside images to outer curve */
}


/* HOME STYLING SLIDER */
.slider-wrapper {
  overflow: hidden;
  position: relative;
}

.image-slider {
  display: flex;
  gap: 15px;
  transition: transform 0.3s ease;
}

.image-slider img {
  height: 200px;
  border-radius: 10px;
  flex-shrink: 0;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
}

.slider-btn.left { left: 10px; }
.slider-btn.right { right: 10px; }

.slider-btn:hover {
  background: rgba(255,255,255,1);
}

@media (max-width: 768px) {
  .image-slider img {
    height: 150px;
  }
}


/* HOME STYLING SLIDER FIX */
#home-styling .image-slider {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

#home-styling .image-slider img {
  height: 220px;         /* fixed height */
  width: auto;           /* keep aspect ratio */
  border-radius: 10px;   /* smooth edges */
  flex-shrink: 0;        /* prevent shrinking */
  object-fit: cover;     /* nicely crop if needed */
}

@media (max-width: 768px) {
  #home-styling .image-slider img {
    height: 170px;
  }
}


/* ===== MOBILE HEADER FIX ===== */
@media (max-width: 768px) {
  .navbar-brand img {
    height: 45px !important;
  }
  .header-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
  }
  .header-contact a {
    font-size: 14px !important;
    padding: 4px 6px !important;
  }
  .navbar-toggler {
    font-size: 1.4rem;
    border: none;
  }
}

/* Toggle icon change when menu is open */
.navbar-toggler.open span {
  display: none;
}
.navbar-toggler.open::after {
  content: "✕";
  font-size: 1.4rem;
}

/* ===== HOME STYLING IMAGE HOLDER BIGGER ===== */
#home-styling .image-slider img {
  height: 260px; /* Bigger height for desktop */
  width: auto;
  border-radius: 12px;
  flex-shrink: 0;
  object-fit: cover;
}
@media (max-width: 768px) {
  #home-styling .image-slider img {
    height: 200px; /* Bigger for mobile too */
  }
}

.image-slider {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS smooth swipe */
  scrollbar-width: none; /* hide scrollbar Firefox */
}
.image-slider::-webkit-scrollbar {
  display: none; /* hide scrollbar Chrome/Safari */
}


/* === Final Responsive Header === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--light-background);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}
.brand-logo {
  height: 72px;
  width: auto;
  object-fit: contain;
}
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .bar {
  width: 24px;
  height: 2px;
  background: var(--theme-primary);
  margin: 3px 0;
}
.desktop-only { display: none; }
.mobile-only { display: flex; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.nav-link { text-decoration: none; color: var(--theme-primary); font-weight: 600; }
.header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  height: 100vh; width: min(85%, 360px);
  background: var(--light-background);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  flex-direction: column;
  padding: 1rem;
}
.mobile-menu.open { transform: translateX(0); }
.nav-top { display: flex; justify-content: space-between; align-items: center; }
.nav-close { background: transparent; border: none; font-size: 2rem; cursor: pointer; }
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }
@media (min-width: 992px) {
  .desktop-only { display: flex; align-items: center; gap: 1.5rem; }
  .mobile-menu, .nav-backdrop { display: none !important; }

@media (min-width: 992px) {
  .mobile-only { display: none !important; }
}
}
@media (max-width: 575.98px) {
  .brand-logo { height: 64px; }
}


/* === Desktop Horizontal Nav Fix === */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  gap: 1rem;
}
.primary-nav ul {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.desktop-only { display: none; }
.mobile-only { display: flex; }
@media (min-width: 992px) {
  .desktop-only { display: block; }
  .mobile-menu, .nav-backdrop { display: none !important; }

@media (min-width: 992px) {
  .mobile-only { display: none !important; }
}
}
.header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.brand-logo {
  height: 72px;
  width: auto;
}
@media (max-width: 575.98px) {
  .brand-logo { height: 64px; }
}


/* === Single Row Header Layout === */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  gap: 1rem;
}
.brand-logo {
  height: 72px;
  width: auto;
  object-fit: contain;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* Space between call/whatsapp and menu */
}
.header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.nav-link {
  text-decoration: none;
  color: var(--theme-primary);
  font-weight: 600;
}
.desktop-only { display: none; }
.mobile-only { display: flex; }
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .bar {
  width: 24px;
  height: 2px;
  background: var(--theme-primary);
  margin: 3px 0;
}
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  height: 100vh; width: min(85%, 360px);
  background: var(--light-background);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  flex-direction: column;
  padding: 1rem;
}
.mobile-menu.open { transform: translateX(0); }
.nav-top { display: flex; justify-content: space-between; align-items: center; }
.nav-close { background: transparent; border: none; font-size: 2rem; cursor: pointer; }
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }
@media (min-width: 992px) {
  .desktop-only { display: block; }
  .mobile-menu, .nav-backdrop { display: none !important; }

@media (min-width: 992px) {
  .mobile-only { display: none !important; }
}
}
@media (max-width: 575.98px) {
  .brand-logo { height: 64px; }
}


@media (max-width: 991.98px) {
  .mobile-menu ul {
    flex-direction: column;
    gap: 1rem;
  }
  .mobile-menu {
    z-index: 2001;
  }
  .nav-backdrop {
    z-index: 2000;
  }
}
.whatsapp-btn img {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
}

.whatsapp-button .whatsapp-icon {
  width: 32px;  /* match call button height */
  height: auto; /* keep proportions */
  display: block;
}



/* WhatsApp Icon Sizing */
.whatsapp-icon {
  width: 32px;
  height: auto;
  display: block;
}

/* Active nav link styling */
.navbar-nav .nav-link.active {
    color: white !important;
    background-color: var(--theme-primary, #5c3d2e);
    border-radius: 4px;
    font-weight: 700;
}

/* Home styling slider container */
#homeStylingSlider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
#homeStylingSlider::-webkit-scrollbar {
    display: none;
}

/* Ensure About Founder section uses the site’s main text color */
#about-founder p,
#about-founder h1,
#about-founder h2,
#about-founder h5 {
    color: var(--bs-body-color, #212529) !important;
}

/* 1) Load Glacial Indifference Bold (700) */
@font-face {
  font-family: 'Glacial Indifference';
  src: url('https://artisanatdesignstudio.in/fonts/GlacialIndifferenceBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 2) Final override for header menu + Call button */
.site-header .navbar-nav .nav-link,
.site-header .primary-nav .nav-link,
.site-header .header-contact-icons .call-button {
  font-family: 'Glacial Indifference', sans-serif;
  font-weight: 700 !important;   /* stays bold even when .active toggles */
}

/* (Optional) If you don’t have the Bold file yet, allow synthetic bold temporarily */
.site-header { 
  font-synthesis: weight;        /* lets the browser fake bold if 700 isn’t available */
}

/* Reduce menu spacing */
.site-header .navbar-nav {
  gap: 10px; /* was probably larger, controls space between items */
}

.site-header .navbar-nav .nav-link {
  padding-left: 8px; /* reduce from 15px or 1rem */
  padding-right: 8px;
}


/* Mobile: Add spacing before logo and more gap to call/WhatsApp */
@media (max-width: 576px) {
    .brand {
        padding-left: 16px; /* more space before logo */
    }
    .header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
}

/* Call button blinking */
/* Add this to styles.css */
@keyframes pulse-call {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(92, 61, 46, 0.6);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(92, 61, 46, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(92, 61, 46, 0);
    }
}

/* Apply to call button */
.call-button {
    animation: pulse-call 1.5s infinite;
}



/* call button reduce size in mobile */
@media (max-width: 576px) {
    .call-button {
        padding: 6px 12px;   /* smaller padding */
        font-size: 14px;     /* smaller text */
        border-radius: 20px; /* keep rounded look */
    }
    .call-button i {
        font-size: 14px;     /* smaller phone icon */
        margin-right: 4px;   /* slightly less space before text */
    }
}

/* --- Header layout --- */
.site-header {
  position: sticky; top: 0; z-index: 9999;
  background: var(--light-background, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.site-header .header-inner {
  display: flex; align-items: center; gap: 12px; padding: 6px 0;
}
.brand-logo { height: 56px; width: auto; }

/* compact CTAs so burger always fits */
.header-contact-icons {
  margin-left: 20px;   /* keep away from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* --- Toggle visibility rules --- */
.desktop-only { display: none; }
.mobile-only  { display: inline-flex; }

@media (min-width: 992px) {
  .desktop-only { display: flex; }
  .mobile-only  { display: none !important; }
  .mobile-menu, .nav-backdrop { display: none !important; }
}

/* --- Burger button --- */
.nav-toggle {
  border: 0; background: transparent; padding: 8px;
  display: inline-flex; flex-direction: column; gap: 4px;
}
.nav-toggle .bar { width: 24px; height: 2px; background: #333; display: block; }

/* --- Mobile slide-in menu --- */
.mobile-menu {
  position: fixed; inset: 0 auto 0 0;
  width: 80%; max-width: 320px;
  transform: translateX(-100%); transition: transform .3s ease;
  background: #fff; color: #333; z-index: 10000; padding: 16px; overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .nav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mobile-menu .nav-close { background: transparent; border: 0; font-size: 28px; line-height: 1; }

.nav-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 9999;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }

body.no-scroll { overflow: hidden; }

/* Avoid crowding on very small phones */
@media (max-width: 400px) {
  .brand-logo { height: 48px; }
}

@media (max-width: 480px) {
  .header-contact-icons {
    gap: 6px; /* slightly smaller gap for small screens */
  }
}

/* --- HEADER HEIGHT CONSISTENCY --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--light-background, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Ensure consistent height across breakpoints */
.site-header .header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  flex-wrap: nowrap; /* Prevents wrapping that causes height jumps */
}

/* Call & WhatsApp spacing: away from logo but not pushing menu off screen */
.header-contact-icons {
  flex-shrink: 0;
  margin-left: 16px; /* space from logo */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* --- CONTENT OFFSET FOR STICKY HEADER --- */
main, .hero-section, .intro-section {
  padding-top: clamp(80px, 12vh, 120px); /* matches typical header height */
}

/* MOBILE TWEAKS */
@media (max-width: 480px) {
  .header-contact-icons {
    margin-left: 12px; /* smaller space from logo on very small screens */
    gap: 6px;
  }
  main, .hero-section, .intro-section {
    padding-top: clamp(72px, 14vh, 110px);
  }
}



/* =============================
   MENU HIGHLIGHT ON SCROLL
   ============================= */
.primary-nav a {
  position: relative;
  transition: color 0.3s ease;
}

.primary-nav a.active {
  color: var(--highlight-color, #e63946);
}

.primary-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: var(--highlight-color, #e63946);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: highlight-grow 0.4s forwards ease-out;
}

@keyframes highlight-grow {
  to {
    transform: scaleX(1);
  }
}

/* =============================
   HOOKED MENU (Fixed Header)
   ============================= */
body[data-hooked="1"] .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
body[data-hooked="0"] .site-header {
  position: relative;
}



/* =============================
   MENU HIGHLIGHT ON SCROLL
   ============================= */
.primary-nav a.active::after {
  background: white; /* changed from highlight color to white */
}



.site-header .brand img {
  transform: scale(var(--logo-scale));
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* =============================
   HOTFIX: Menu underline color (safe override)
   - Uses a local CSS var on .site-header so we don't touch :root
   - Defaults to #222 if --header-bg-color is not defined elsewhere
   ============================= */
.site-header { --menu-underline-color: var(--header-bg-color, #222); }
.primary-nav a.active::after { background: var(--menu-underline-color) !important; }

/* =============================
   HEADER BACKGROUND COLOR + MOBILE MENU MATCH
   ============================= */
.site-header {
  --header-bg-color: #d9c9c1; /* Cream color */
}

.mobile-menu, 
.mobile-nav, 
.primary-nav.active {
  background: var(--header-bg-color) !important;
}



/* ====== VILLA SLIDER START ====== */
#villa-section {
  padding: 20px;
  background: #f8f8f8;
  text-align: center;
}
#villa-section h2 {
  margin-bottom: 15px;
}
.villa-slider {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  margin: auto;
}
.villa-viewport {
  overflow: hidden;
  position: relative;
}
.villa-track {
  display: flex;
  will-change: transform;
  touch-action: pan-y;
}
.villa-track img {
  flex-shrink: 0;
  width: 100%;
  max-width: 600px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 15px;
  pointer-events: none;
}
.villa-btn {
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.villa-btn.left { left: 10px; }
.villa-btn.right { right: 10px; }
/* ====== VILLA SLIDER END ====== */

/* ====== HOME STYLING SLIDER START ====== */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: sans-serif;
  background: #f8f8f8;
}
.home-styling h2 {
+   text-align: center;
+   padding: 20px 0;
+ }
.slider-wrapper {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  margin: auto;
}
.slider-viewport {
  overflow: hidden;
  position: relative;
}
.slider-track {
  display: flex;
  will-change: transform;
  touch-action: pan-y;
}
.slider-track img {
  flex-shrink: 0;
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px;
  pointer-events: none;
}
.slider-btn {
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.slider-btn.left { left: 10px; }
.slider-btn.right { right: 10px; }
/* ====== HOME STYLING SLIDER END ====== */


/* === Custom Header Alignment Fix === */
./* === Custom Header Alignment Fix === */
.brand-logo,
.logo-img {
  margin-left: 12px !important; /* Space from left edge */
}

.header-inner {
  display: flex;
  align-items: center;
}

.header-right,
.header-contact-icons {
  margin-left: auto !important; /* Push Call/WhatsApp toward the right */
}

.primary-nav {
  order: 3; /* Menu stays last */
}

/* Mobile: add space for logo */
@media (max-width: 991px) {
  .brand-logo,
  .logo-img {
    margin-left: 12px !important;
  }
}



/* =============================
   HEADER & LOGO FINAL FIX
   ============================= */

/* Variable for logo zoom (change value to adjust) */
:root {
  --logo-scale: 1.6; /* 1 = original size, 1.3 = 30% bigger */
}

/* Header alignment */
.header-inner {
  display: flex;
  align-items: center;
}

.header-right,
.header-contact-icons {
  margin-left: auto !important; /* Push Call/WhatsApp toward menu */
}

.primary-nav {
  order: 3; /* Menu always last */
}

/* Logo spacing & zoom (applies to all devices) */
.brand-logo,
.logo-img {
  margin-left: 12px !important;
}

.brand-logo img,
.logo-img img {
  transform: scale(var(--logo-scale));
  transform-origin: center;
  transition: transform 0.3s ease;
}




/* Scroll to Top Button */
/* Scroll to Top Button - Transparent Modern Look */
#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent */
  color: white;
  cursor: pointer;
  padding: 14px;
  border-radius: 50%;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
  display: none; /* hidden by default */
  transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
}

#scrollTopBtn i {
  font-size: 18px;
}

#scrollTopBtn:hover {
  background-color: rgba(0, 0, 0, 0.8); /* darker on hover */
  transform: scale(1.1);
}





/* Footer Social Icons */
/* Footer Social Icons */
.footer-social {
  gap: 15px; /* space between icons */
}

.footer-social .social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2); /* subtle white circle */
  color: #fff; /* ✅ always white icon */
  font-size: 18px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.footer-social .social-icon:hover {
  background: #fff;   /* solid white background on hover */
  color: var(--theme-accent); /* icon switches to accent color */
  transform: scale(1.1);
}