body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    box-sizing: border-box; /* Ensures padding/borders are included in dimensions */
	scroll-snap-type: y mandatory;
}

html, body {
    background-color: #FFFCF6;
	height: auto;
}

.slide {
    height: 100dvh;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    scroll-snap-align: start;
    overflow-x: hidden;
	overflow: hidden;
}

/* Top SVG styling */
.slide1-top-image {
    width: 4032px;
    height: 216px;
	align-self: flex-start;
}

/* Content area for first slide */
.slide1-content-area {
	display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.slide1-text-block {
	flex: 0 0 731;
    text-align: left;
    font-family: "Crimson Text", serif;
    font-size: 150px;
    line-height: 165px;
	font-weight: 700;
    padding-left: 10%;
}

.slide1-right-side-image-container {
    flex: 1; /* Takes remaining space to the right */
    display: flex;
    justify-content: center; /* Centers image horizontally in remaining space */
    align-items: center; /* Centers image vertically in remaining space */
}

.slide1-right-side-image {
    width: 600px;
    height: auto;
    object-fit: contain; /* Preserves aspect ratio without distortion */
}


/* Navigation button */
.next-slide-button {
    /* position: absolute; */
    /* bottom: 0px; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
	flex: 1;
	justify-content: center;
	align-self: center;
    background: none;
    border: none;
    cursor: pointer;
}

.next-slide-button:hover {
    background-color: rgba(255, 255, 255, 1);
}

.next-button-icon {
    max-width: 108px;
    max-height: auto;
	object-fit: contain; 
}

/* Second slide styling */
.slide2-top-image {
    width: 216px;
    height: 216px;
	align-self: flex-start;
}

.slide2-bottom-image {
    width: 216px;
    height: 288px;
	align-self: flex-end;
}

.contacts-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
	height: 100%;
    padding-left: 10%;
	gap: 0px;
}

.contacts-block h1 {
	text-align: left;
    font-family: Montserrat;
    font-size: 96px;
    line-height: 100%;
	font-weight: 500;
	color: #E47564;
    background-color: #FED271;
    padding: 15px 24px;
	margin: 0;
	margin-bottom: 131px
}

.contact-item {
    display: flex;
	flex-direction: row;
    align-items: center;
	gap: 30px;
    margin: 0;
	margin-bottom: 8px
}

.contact-item-icon {
    width: 72px;
    height: 72px;
	object-fit: contain;
	margin: 0;
}

.contact-item-text {
    text-align: left;
    font-family: Montserrat;
    font-size: 60px;
    line-height: 112px;
	font-weight: 500;
	transform: translateY(-2px);
	margin: 0;
}

/* Media query for mobile: Overrides when screen width is 768px or smaller */
@media screen and (max-width: 768px) {
	.slide {
        width: 100%; /* Explicitly reinforces full viewport width on mobile */
        height: 100vh; /* Ensures height matches viewport, accounting for dynamic UI like address bars */
        max-width: 100%; /* Caps at parent width if viewport calculation varies */
		/* max-height: 100% */
        overflow: hidden; /* Strict cropping for both axes to avoid any scroll */
		background-color: #FFFCF6;
    }
    
    /* Optional: Address iOS Safari safe areas for true edge-to-edge rendering */
    section::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-top, 0);
        background: inherit; /* Matches section background to avoid gaps */
        z-index: 1;
    }
	
    .slide1-top-image {
		display: flex;
		width: 100dvw;
		height: 108px;
		align-self: flex-start;
		overflow-x: hidden;
		object-fit: cover;
		object-position: left;
		/* display: block; */ /* Prevents inline spacing artifacts */
		max-width: 100%
	}
	
	/* Content area for first slide */
	.slide1-content-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 48px;
		margin-bottom: 48px;
	}

	.slide1-text-block {
		flex: 1; /* Each takes equal (half) vertical space */
        display: flex; /* Makes the element a flex container for internal centering */
        justify-content: center; /* Centers text horizontally */
        align-items: center; /* Centers text vertically */

		font-family: "Crimson Text", serif;
		font-size: 48px;
		line-height: 100%;
		font-weight: 700;
		text-align: left;
		align-self: center;
		padding-left: 32px;
		padding-right: 32px;
	}

	.slide1-right-side-image-container {
		flex: 1; /* Each takes equal (half) vertical space */
        display: flex; /* Makes the element a flex container for internal centering */
        justify-content: center; /* Centers text horizontally */
        align-items: flext-start; /* Centers text vertically */
        width: 100%;
	}

	.slide1-right-side-image {
		width: 206px;
		height: auto;
		object-fit: contain; /* Preserves aspect ratio without distortion */
	}
	
	.next-button-icon {
		max-width: 56px;
		max-height: auto;
		object-fit: contain; 
	}
		
/* Second slide styling */
	.slide2-top-image {
		width: 108px;
		height: auto;
		align-self: flex-start;
	}

	.slide2-bottom-image {
		width: 108px;
		height: auto;
		align-self: flex-end;
	}

	.contacts-block {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding-left: 10%;
		gap: 0px;
	}

	.contacts-block h1 {
		text-align: left;
		font-family: Montserrat;
		font-size: 32px;
		line-height: 100%;
		font-weight: 500;
		color: #E47564;
		background-color: #FED271;
		padding: 5px 8px;
		margin: 0;
		margin-bottom: 32px
	}

	.contact-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		margin: 0;
		margin-bottom: 4px
	}

	.contact-item-icon {
		width: 24px;
		height: auto;
		object-fit: contain;
		margin: 0;
	}

	.contact-item-text {
		text-align: left;
		font-family: Montserrat;
		font-size: 16px;
		line-height: 37.5px;
		font-weight: 500;
		transform: translateY(-1px);
		margin: 0;
	}
}