/* sd-interiors.css */

	html {
		font-family: 'Cormorant Garamond', serif;
		scroll-behavior: smooth;
		margin: 0;
		/*min-height: 100vh; */
		scroll-padding-top: 6.5rem;
	}


	@media (min-width: 640px) { /* Tailwind's 'sm' breakpoint */
		html {
			/* Estimate your header height on sm+ screens. It's sm:h-auto sm:py-3. If nav items make it about 4rem (64px) tall, use that. You may need to inspect its actual height or fine-tune this value. */
			scroll-padding-top: 5.5rem; /* Example: Adjust if your sm+ header is taller/shorter */
		}
	}


	body {
		font-family: 'Cormorant Garamond', serif;
		margin: 0;
		min-height: 100vh;
	}


	#home {
		position: relative; 
		height: 100vh;      
		display: flex;      
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		overflow: hidden;   
		color: white;
		background-color: transparent;
		scroll-margin-top: 20px; /* Matches its new translateY(20px) animation */
		}


	#home::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* Original background image path restored */
		background-image: url('../images/0.jpg'); 
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: -1;        
		opacity: 1;       
	}


	#home h1, /* Changed h2 to h1 for semantic correctness */
	#home h2, /* If you need a sub-heading, use h2 */
	#home p {
		position: relative; 
		z-index: 1; 
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); 
	}


	.section-hidden {
		display: none !important; /* Use !important to ensure it overrides other display properties */
	}


	.image-zoom-container {
		/* The container's 'overflow: hidden' clips what doesn't fit in the original container bounds. */
		overflow: hidden; /* This is essential to clip the oversized image */
	}


	#p4-image {
		min-width: 65%;   /* Or any percentage you like, e.g., 110%, 130% */
		min-height: 65%;  /* Keep this same as min-width to scale uniformly before object-fit does its work */
		object-fit: cover; /* Scales the image content within that box, maintaining aspect ratio, covers the new dimensions, and centers the image content */
	}


	/* 1. Base initial state for ALL elements that will reveal */
	.reveal-on-scroll {
		opacity: 0;
		transition: opacity 1s ease-out, transform 1.2s ease-out;
		will-change: opacity, transform;
		transform: translateY(20px); /* Default slide for sections other than #home */
	}


	#home.reveal-on-scroll { */
		transform: translateY(0px); /* Overrides the default translateY(50px) for #home only */
 	}


	.reveal-on-scroll.is-visible {
		opacity: 1;               /* Target opacity: 1, fades in */
		transform: translateY(0); /* All elements end at translateY(0) */
	}


	.sd-mt-8 {
		margin-top: 2rem;
		
	}
	

	.sd-mt-18 {
		margin-top: 4.5rem; /* This is equivalent to Tailwind's mt-18 (4.5rem = 72px if 1rem=16px) */
	}


	.sd-mt-20 {
		margin-top: 5rem;
	}


	.sd-mt-22 {
		margin-top: 5.5rem;
	}


	.sd-mt-24 {
		margin-top: 6rem;
	}


	.sd-mt-26 {
		margin-top: 6.5rem;
	}


	.sd-mt-28 {
		margin-top: 7rem;
	}