/* About Block Styles */

.about {
	position: relative;
	width: 100%;
	min-height: 400px;
	background-image: url('../../assets/images/about-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 77px 0 188px;
    background-color: #d7b9b3;
}

.about-wrapper {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	max-width: 1075px;
	margin: 0 auto;
	width: 100%;
	justify-content: space-between;
}

/* Left Side: Copy Content */
.about-left {
	min-width: 0;
	width: 716px;
}

.about-copy {
	background-color: #F6E9DA;
	border-radius: 17px;
	padding: 83px 78px 10px;
	color: #333;
	line-height: 1.6;
	box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
	min-height: 422px;
}

.about-copy p {
	margin: 0 0 1rem 0;
	font-size: 14px;
	line-height: 25px;
	font-family: 'Figtree';
	letter-spacing: 0.045rem;
	color: #000000;
}
.about-copy p em {
	    display: block;
	    text-align: right;
	    transform: rotate(-7deg);
	    font-size: 41px;
	    font-family: 'Tomato Pasta';
	    font-weight: 100;
	    font-style: inherit;
	    margin: 52px -41px 0 0;
	    letter-spacing: 0;
}

.about-copy p:last-child {
	margin-bottom: 0;
}

.about-copy h1,
.about-copy h2,
.about-copy h3,
.about-copy h4,
.about-copy h5,
.about-copy h6 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 18px;
	line-height: 22px;
	margin: 0 0 22px;
	letter-spacing: -0.055rem;
}

/* Right Side: Image and Links */
.about-right {
	min-width: 0;
	display: flex;
	flex-direction: column;
	width: 340px;
	background: #33391D;
	padding: 50px 20px 0;
	border-radius: 16px;
	box-shadow: 1px 5px 7px rgba(0, 0, 0, 0.2);
}

.about-image {
	overflow: hidden;
	max-width: 209px;
	margin: 0 auto;
}

.about-image img {
	width: 100%;
	display: block;
	object-fit: cover;
	height: 270px;
}

.about-links {
	padding: 35px 0 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	color: #F6E9DA;
}

.about-link {
	color: #F6E9DA;
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-size: 15px;
	transition: opacity 0.2s ease, transform 0.2s ease;
	font-family: 'Figtree', sans-serif;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.about-link:hover,
.about-link:focus {
	opacity: 0.8;
	transform: translateY(-2px);
}

.about-link:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
	border-radius: 4px;
}

.about-link-separator {
	color: #F6E9DA;
	font-weight: 400;
	margin: 0 5px;
}

/* Responsive Styles */
@media (max-width: 1080px) {
	.about-wrapper {
		gap: 1.5rem;
		max-width: 750px;
	}
	
	.about-copy {
		padding: 1.5rem;
	}
	
	.about-links {
		padding: 1.25rem 0rem;
	}
	.about-copy p em {
	margin:30px 0 0 0}
	.about-right {
		height:422px;
	}
}

@media (max-width: 768px) {
	.about {
		background-image: url(../../assets/images/kwc-mobilebg.png);
		background-size: cover;
		background-position: center bottom -73px;
		padding: 50px 0 112px;
	}
	
	.about-wrapper {
		flex-direction: column;
		gap: 1.5rem;
		max-width: 370px;
	}
	
	.about-left,
	.about-right {
		width: 100%;
	}
	
	.about-copy {
		padding: 1.5rem;
	}
	
	.about-image {
		padding: 0.75rem;
	}
}

@media (max-width: 580px) {
	.about {
		background-position: center bottom 0;
		padding: 20px 0 130px;
	}
	.about-copy h2 {
text-align:Center;}
	    .about-image {
        padding:0;
        max-width: 100%;
        width: 100%;
        height: auto;
    }
	.about-right {
		height:auto;
		padding:40px 40px 5px
	}
	.about-image img {
width:100%;
	height:auto;}
}

@media (max-width:440px) {
	.about-wrapper {
		max-width:90%;
	}
}
/* Accessibility: Focus States */
.about-link:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 3px;
}

/* Print Styles */
@media print {
	.about {
		background-image: none;
		background-color: #f5f5f5;
	}
	
	.about-link {
		color: #000;
		text-decoration: underline;
	}
	
	.about-link-separator {
		color: #000;
	}
}