/* ==========================================================
   ZEWED Studio Premium Experience
   Version 1.0
==========================================================*/

/*----------------------------------------------------------
Root
----------------------------------------------------------*/

:root{

	--zs-page:#F6F4F1;

	--zs-card:#FFFFFF;

	--zs-text:#161616;

	--zs-text-light:#666666;

	--zs-border:#ECE8E2;

	--zs-accent:#8C7355;

	--zs-radius:28px;

	--zs-radius-large:36px;

	--zs-shadow:
		0 15px 50px rgba(0,0,0,.05);

	--zs-transition:.35s ease;

}


/*----------------------------------------------------------
Page
----------------------------------------------------------*/

body{

	background:var(--zs-page);

}

.zewed-experience{

	background:var(--zs-page);

	padding:50px 0 100px;

}


/*----------------------------------------------------------
Container
----------------------------------------------------------*/

.zewed-container{

	max-width:1280px;

	margin:0 auto;

	padding:0 28px;

}


/*----------------------------------------------------------
Section
----------------------------------------------------------*/

.zewed-section{

	background:var(--zs-card);

	border:1px solid var(--zs-border);

	border-radius:var(--zs-radius);

	box-shadow:var(--zs-shadow);

	padding:64px;

	margin-bottom:28px;

	position:relative;

	overflow:hidden;

	transition:
		transform var(--zs-transition),
		box-shadow var(--zs-transition);

}


.zewed-section:last-child{

	margin-bottom:0;

}


.zewed-section:hover{

	transform:translateY(-4px);

	box-shadow:
		0 25px 70px rgba(0,0,0,.08);

}


/*----------------------------------------------------------
Divider
----------------------------------------------------------*/

.zewed-section::after{

	content:"";

	position:absolute;

	left:50%;

	bottom:0;

	transform:translateX(-50%);

	width:120px;

	height:1px;

	background:linear-gradient(
		90deg,
		transparent,
		#E7E2DA,
		transparent
	);

}


.zewed-section:last-child::after{

	display:none;

}
/*----------------------------------------------------------
Typography
----------------------------------------------------------*/

.zewed-section-title{

	font-size:42px;

	font-weight:700;

	line-height:1.2;

	letter-spacing:-1px;

	color:var(--zs-text);

	margin:0 0 18px;

}


.zewed-section-subtitle{

	font-size:18px;

	line-height:1.8;

	color:var(--zs-text-light);

	max-width:760px;

	margin:0 auto 42px;

}


.zewed-section p{

	font-size:17px;

	line-height:1.9;

	color:var(--zs-text-light);

	margin-bottom:22px;

}


.zewed-section strong{

	color:var(--zs-text);

	font-weight:600;

}


.zewed-section h2{

	font-size:42px;

	line-height:1.2;

	font-weight:700;

	color:var(--zs-text);

	margin-bottom:24px;

}


.zewed-section h3{

	font-size:28px;

	font-weight:600;

	line-height:1.3;

	margin-bottom:18px;

	color:var(--zs-text);

}


/*----------------------------------------------------------
Lists
----------------------------------------------------------*/

.zewed-section ul{

	margin:28px 0;

	padding-left:22px;

}


.zewed-section li{

	margin-bottom:14px;

	line-height:1.8;

	color:var(--zs-text-light);

}


/*----------------------------------------------------------
Buttons
----------------------------------------------------------*/

.zewed-button,
.zewed-btn,
.zewed-section .button,
.zewed-section button{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:15px 34px;

background:#8C7355;

	color:#FFF;

	border:none;

	border-radius:999px;

	font-size:15px;

	font-weight:600;

	text-decoration:none;

	cursor:pointer;

	transition:all .3s ease;

}


.zewed-button:hover,
.zewed-btn:hover,
.zewed-section .button:hover,
.zewed-section button:hover{

background:#735C42;

	transform:translateY(-2px);

	box-shadow:0 12px 30px rgba(0,0,0,.18);

	color:#FFF;

}


/*----------------------------------------------------------
Cards
----------------------------------------------------------*/

.zewed-card{

	background:#FFF;

	border:1px solid var(--zs-border);

	border-radius:22px;

	padding:30px;

	transition:all .3s ease;

}


.zewed-card:hover{

	transform:translateY(-4px);

	box-shadow:0 15px 40px rgba(0,0,0,.06);

}


/*----------------------------------------------------------
Images
----------------------------------------------------------*/

.zewed-section img{

	width:100%;

	height:auto;

	display:block;

	border-radius:20px;

	transition:transform .4s ease;

}


.zewed-section img:hover{

	transform:scale(1.02);

}


/*----------------------------------------------------------
Spacing Helpers
----------------------------------------------------------*/

.zewed-section > *:last-child{

	margin-bottom:0;

}


.zewed-gap-sm{

	margin-top:20px;

}


.zewed-gap{

	margin-top:40px;

}


.zewed-gap-lg{

	margin-top:64px;

}


/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media (max-width:991px){

	.zewed-section{

		padding:48px;

	}

	.zewed-section-title,
	.zewed-section h2{

		font-size:34px;

	}

	.zewed-section-subtitle{

		font-size:17px;

	}

}


@media (max-width:768px){

	.zewed-container{

		padding:0 18px;

	}

	.zewed-section{

		padding:32px 24px;

		margin-bottom:20px;

		border-radius:22px;

	}

	.zewed-section-title,
	.zewed-section h2{

		font-size:28px;

	}

	.zewed-section h3{

		font-size:22px;

	}

	.zewed-section-subtitle{

		font-size:16px;

		margin-bottom:28px;

	}

	.zewed-section p{

		font-size:16px;

		line-height:1.8;

	}

	.zewed-button,
	.zewed-btn,
	.zewed-section .button,
	.zewed-section button{

		width:100%;

	}

}
/*----------------------------------------------------------
Premium Grid Layouts
----------------------------------------------------------*/

.zewed-grid{

	display:grid;

	grid-template-columns:repeat(2,minmax(0,1fr));

	gap:40px;

	align-items:center;

}

.zewed-grid-3{

	display:grid;

	grid-template-columns:repeat(3,minmax(0,1fr));

	gap:28px;

}

.zewed-grid-4{

	display:grid;

	grid-template-columns:repeat(4,minmax(0,1fr));

	gap:24px;

}


/*----------------------------------------------------------
Feature Cards
----------------------------------------------------------*/

.zewed-feature{

	background:#FFF;

	border:1px solid var(--zs-border);

	border-radius:22px;

	padding:28px;

	height:100%;

	transition:all .3s ease;

}

.zewed-feature:hover{

	transform:translateY(-5px);

	box-shadow:0 18px 40px rgba(0,0,0,.06);

}

.zewed-feature-icon{

	font-size:34px;

	margin-bottom:18px;

}

.zewed-feature-title{

	font-size:20px;

	font-weight:600;

	color:var(--zs-text);

	margin-bottom:12px;

}

.zewed-feature-text{

	font-size:16px;

	line-height:1.8;

	color:var(--zs-text-light);

}


/*----------------------------------------------------------
Gallery (Swiper)
----------------------------------------------------------*/

.zewed-gallery-slider{

	margin-top:40px;

}

.zewed-gallery-slider .swiper-slide{

	height:auto;

	display:flex;

	align-items:center;

	justify-content:center;

}

.zewed-gallery-link{

	display:block;

	width:100%;

	background:#FAF9F7;

	border:1px solid var(--zs-border);

	border-radius:22px;

	padding:12px;

	overflow:hidden;

	box-shadow:0 10px 30px rgba(0,0,0,.05);

	transition:all .35s ease;

}

.zewed-gallery-link:hover{

	transform:translateY(-4px);

	box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.zewed-gallery-image{

	display:block;

	width:100%;

	height:auto;

	max-width:100%;

	border-radius:16px;

	object-fit:contain;

	transition:transform .35s ease;

}

.zewed-gallery-link:hover .zewed-gallery-image{

	transform:scale(1.02);

}

.zewed-gallery-slider .swiper-pagination{

	margin-top:24px;

	position:relative;

}

.zewed-gallery-slider .swiper-pagination-bullet{

	background:#CFC7BC;

	opacity:1;

}

.zewed-gallery-slider .swiper-pagination-bullet-active{

	background:#161616;

}

/*----------------------------------------------------------
Mobile
----------------------------------------------------------*/

@media (max-width:768px){

	.zewed-gallery-slider{

		margin-top:28px;

	}

	.zewed-gallery-link{

		padding:8px;

		border-radius:18px;

	}

	.zewed-gallery-image{

		width:100%;

		height:auto;

		max-height:420px;

		object-fit:contain;

	}

}

/*----------------------------------------------------------
Video Block
----------------------------------------------------------*/

.zewed-video{

	position:relative;

	border-radius:24px;

	overflow:hidden;

	background:#FAF9F7;

	border:1px solid var(--zs-border);

	box-shadow:0 10px 30px rgba(0,0,0,.05);

	padding:12px;

}

.zewed-video iframe{

	width:100%;

	aspect-ratio:16/9;

	border:0;

	display:block;

}


/*----------------------------------------------------------
Image Frame
----------------------------------------------------------*/

.zewed-image-frame{

	background:#FFF;

	padding:12px;

	border-radius:24px;

	box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.zewed-image-frame img{

	border-radius:18px;

}


/*----------------------------------------------------------
Quote Block
----------------------------------------------------------*/

.zewed-quote{

	padding:36px;

	border-left:4px solid var(--zs-accent);

	background:#FAF9F7;

	border-radius:18px;

	font-size:22px;

	font-style:italic;

	line-height:1.8;

	color:var(--zs-text);

}


/*----------------------------------------------------------
Badges
----------------------------------------------------------*/

.zewed-badges{

	display:flex;

	flex-wrap:wrap;

	gap:12px;

	margin-top:24px;

}

.zewed-badge{

	padding:10px 18px;

	border-radius:999px;

	background:#F4F2EE;

	border:1px solid var(--zs-border);

	font-size:14px;

	font-weight:600;

	color:var(--zs-text);

}


/*----------------------------------------------------------
Utilities
----------------------------------------------------------*/

.text-center{

	text-align:center;

}

.text-left{

	text-align:left;

}

.text-right{

	text-align:right;

}

.mb-0{

	margin-bottom:0;

}

.mb-20{

	margin-bottom:20px;

}

.mb-40{

	margin-bottom:40px;

}

.mt-20{

	margin-top:20px;

}

.mt-40{

	margin-top:40px;

}


/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media (max-width:991px){

	.zewed-grid{

		grid-template-columns:1fr;

		gap:28px;

	}

	.zewed-grid-3{

		grid-template-columns:repeat(2,1fr);

	}

	.zewed-grid-4{

		grid-template-columns:repeat(2,1fr);

	}

}

@media (max-width:768px){

	.zewed-grid-3,

	.zewed-grid-4,

	.zewed-gallery{

		grid-template-columns:1fr;

	}

	.zewed-feature{

		padding:24px;

	}

	.zewed-quote{

		padding:24px;

		font-size:18px;

	}

}
/*----------------------------------------------------------
CTA Section
----------------------------------------------------------*/

.zewed-cta{

	background:linear-gradient(135deg,#FFFFFF 0%,#FAF9F7 100%);

	border:1px solid var(--zs-border);

	border-radius:32px;

	padding:72px 48px;

	text-align:center;

	box-shadow:0 20px 60px rgba(0,0,0,.06);

	position:relative;

	overflow:hidden;

}

.zewed-cta::before{

	content:"";

	position:absolute;

	top:-140px;

	right:-140px;

	width:280px;

	height:280px;

	border-radius:50%;

	background:rgba(140,115,85,.05);

}

.zewed-cta h2{

	margin-bottom:20px;

}

.zewed-cta p{

	max-width:700px;

	margin:0 auto 34px;

}

.zewed-cta .zewed-button{

	min-width:220px;

}


/*----------------------------------------------------------
Hover Polish
----------------------------------------------------------*/

.zewed-section,
.zewed-card,
.zewed-feature,
.zewed-gallery-item{

	will-change:transform;

}

.zewed-section:hover{

	border-color:#E4DED5;

}

.zewed-card:hover,

.zewed-feature:hover{

	border-color:#E4DED5;

}


/*----------------------------------------------------------
Links
----------------------------------------------------------*/

.zewed-section a{

	color:var(--zs-text);

	text-decoration:none;

	transition:color .25s ease;

}

.zewed-section a:hover{

	color:var(--zs-accent);

}


/*----------------------------------------------------------
Selection
----------------------------------------------------------*/

::selection{

	background:#161616;

	color:#FFF;

}


/*----------------------------------------------------------
Focus
----------------------------------------------------------*/

button:focus,

a:focus,

input:focus,

textarea:focus,

select:focus{

	outline:none;

	box-shadow:0 0 0 3px rgba(140,115,85,.20);

}


/*----------------------------------------------------------
Smooth Scroll
----------------------------------------------------------*/

html{

	scroll-behavior:smooth;

}


/*----------------------------------------------------------
Reveal Animation
----------------------------------------------------------*/

.zewed-section{

	animation:zewedFade .6s ease both;

}

@keyframes zewedFade{

	from{

		opacity:0;

		transform:translateY(24px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}


/*----------------------------------------------------------
Scrollbar
----------------------------------------------------------*/

::-webkit-scrollbar{

	width:10px;

}

::-webkit-scrollbar-track{

	background:#F4F2EE;

}

::-webkit-scrollbar-thumb{

	background:#CFC7BC;

	border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

	background:#B6AA9A;

}


/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media (max-width:768px){

	.zewed-cta{

		padding:44px 24px;

		border-radius:24px;

	}

	.zewed-cta h2{

		font-size:30px;

	}

	.zewed-cta p{

		font-size:16px;

	}
.zewed-gallery-item img{

	width:100%;

	height:auto;

	object-fit:contain;

}
}