/*
 * Bangaliana Light Theme CSS for Shilpokormo Studio
 */

@font-face {
    font-family: 'SolaimanLipi';
    src: url('../fonts/SolaimanLipi_22-02-2012.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Narail';
    src: url('../fonts/FN Mahin Narail Type AM Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
	/* Brand Colors */
	--red: #E32636;
	--red-light: rgba(227, 38, 54, 0.1);
	--yellow: #FFC107;
	--yellow-light: rgba(255, 193, 7, 0.1);
	--white: #FFFFFF;
	--black: #1A1A1A;
	--gray-light: #F9FAFB;
	
	/* Text Colors */
	--text-main: #1A1A1A;
	--text-light: rgba(0, 0, 0, 0.6);
	
	/* Typography */
	--font-body: 'SolaimanLipi', sans-serif;
	--font-heading: 'Narail', 'SolaimanLipi', serif;
	
	/* Radii & Glassmorphism */
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 9999px;
	--glass-blur: blur(15px);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-body);
	color: var(--text-main);
	background-color: var(--white);
	line-height: 1.6;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-body);
	color: var(--red);
	line-height: 1.3;
	margin-bottom: 1rem;
	font-weight: 600; 
}

a {
	color: var(--red);
	text-decoration: none;
	transition: all 0.3s ease;
}

a:hover {
	color: var(--black);
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Background Utility Classes */
.bg-white { background-color: var(--white); }
.bg-gray { background-color: var(--gray-light); }
.bg-red-tint { background-color: rgba(227, 38, 54, 0.03); }
.bg-yellow-tint { background-color: rgba(255, 193, 7, 0.05); }

/* Header */
.site-header {
	background: transparent;
	border-bottom: 1px solid transparent;
	padding: 20px 0;
	position: fixed; /* Overlap hero */
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	transition: all 0.3s ease;
}
.site-header.scrolled {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid rgba(0,0,0,0.05);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	padding: 15px 0;
}

.header-inner {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: center !important;
	position: relative;
	width: 100%;
}

.site-logo {
	flex-shrink: 0;
}

/* Default (Transparent Header on Dark Hero) */
.site-logo a {
	font-family: var(--font-heading);
	font-size: 32px;
	color: var(--white);
	white-space: nowrap;
	transition: color 0.3s ease;
}
.site-logo span {
	color: var(--white);
	transition: color 0.3s ease;
}

.header-right-panel {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-left: auto;
}

.main-navigation ul {
	list-style: none;
	display: flex;
	gap: 25px;
}

.main-navigation a {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	transition: color 0.3s ease;
}
.main-navigation a:hover {
	color: var(--red);
}

.mobile-menu-toggle {
	display: none;
	background: transparent;
	border: none;
	font-size: 26px;
	color: var(--white);
	cursor: pointer;
	padding: 5px;
	transition: color 0.3s ease;
}

/* Scrolled Header Text Colors */
.site-header.scrolled .site-logo a {
	color: var(--red);
}
.site-header.scrolled .site-logo span {
	color: var(--black);
}
.site-header.scrolled .main-navigation a {
	color: var(--text-main);
}
.site-header.scrolled .main-navigation a:hover {
	color: var(--red);
}
.site-header.scrolled .mobile-menu-toggle {
	color: var(--black);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--red);
	color: var(--white);
	padding: 12px 28px;
	border: 2px solid var(--red);
	border-radius: var(--radius-pill);
	font-size: 18px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: var(--font-body);
}
.btn:hover {
	background: var(--white);
	color: var(--red);
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(227, 38, 54, 0.2);
}
.btn-outline {
	background: transparent;
	border: 2px solid var(--red);
	color: var(--red);
}
.btn-outline:hover {
	background: var(--red);
	color: var(--white);
}

/* Grid */
.grid-2, .grid-3, .grid-4, .grid-5 {
	display: grid;
	gap: 25px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* App-type Gallery Grid */
.app-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}
.app-gallery-grid > div, .app-gallery-grid > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
}
.team-gallery-panel .app-gallery-grid {
	grid-template-columns: repeat(3, 1fr);
}

/* Global Section Styles */
section {
	padding: 80px 0;
	position: relative;
}

.section-title {
	text-align: center;
	font-size: 42px;
	margin-bottom: 40px;
	color: var(--red);
}

/* Cards */
.dark-card {
	background: var(--white);
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: var(--radius-lg);
	padding: 30px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
}
.dark-card h3, .dark-card h4 {
	font-weight: normal !important;
}
.dark-card:hover {
	transform: translateY(-5px);
	border-color: rgba(227, 38, 54, 0.3);
	box-shadow: 0 15px 35px 0 rgba(227, 38, 54, 0.1);
}

/* Hero Section Slider Styles */
.hero-slider-main {
	position: relative;
	overflow: hidden;
	color: var(--white);
	padding: 120px 0 80px;
	min-height: 80vh;
	display: flex;
	align-items: center;
}

/* Background Slider */
.hero-slider-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-slide-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1s ease-in-out, transform 4s ease-out;
	transform: scale(1.05); /* Slight zoom for animation */
}

.hero-slide-bg.active {
	opacity: 1;
	transform: scale(1);
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6); /* Dark overlay for text readability */
	backdrop-filter: blur(2px);
}

.hero-content-container {
	position: relative;
	z-index: 2;
	text-align: center;
	width: 100%;
}

/* Content Slider */
.hero-slider-content {
	position: relative;
	min-height: 450px; /* Accommodate the 400px tall shapes and text blocks */
	display: flex;
	align-items: center;
}

/* Dynamic Hero Slide Layouts */
.hero-slide-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
	transform: translateY(30px);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
}

.hero-slide-content.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Layout Variations */
.layout-split-right { flex-direction: row; }
.layout-split-left { flex-direction: row-reverse; }
.layout-stack { 
	flex-direction: column; 
	justify-content: center; 
	text-align: center; 
	padding-top: 50px;
}

/* Parts */
.slide-text-part {
	flex: 1;
	text-align: left; /* Default left */
}
.slide-text-part.text-right { text-align: right; }
.slide-text-part.text-center { text-align: center; }

.slide-media-part {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

/* Slide Typography & Content */
.hero-title {
	font-family: var(--font-heading);
	font-size: 56px;
	color: var(--white);
	margin-bottom: 20px;
	font-weight: normal;
	text-shadow: 0 4px 15px rgba(0,0,0,0.6);
	line-height: 1.2;
}

.hero-subtitle {
	font-size: 20px;
	color: rgba(255, 255, 255, 0.95);
	margin-bottom: 25px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.slide-features {
	list-style: none;
	display: flex;
	gap: 20px;
	margin-bottom: 25px;
	color: var(--white);
	font-size: 16px;
	flex-wrap: wrap;
}
.layout-split-right .slide-features { justify-content: flex-start; }
.layout-split-left .slide-features { justify-content: flex-end; }
.layout-stack .slide-features { justify-content: center; }

.slide-features li {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(0,0,0,0.3);
	padding: 5px 15px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255,255,255,0.2);
}
.slide-features i { color: var(--yellow); }

.slide-price {
	font-size: 24px;
	font-weight: bold;
	color: var(--yellow);
	margin-bottom: 30px;
	text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

/* Slide Specific Buttons */
.slide-btn {
	padding: 15px 35px;
	font-size: 20px;
	gap: 10px;
	border: none;
}
.slide-btn:hover {
	transform: translateY(-3px) scale(1.05);
}
.btn-yellow { background: var(--yellow); color: var(--black); }
.btn-yellow:hover { background: var(--white); color: var(--black); }
.btn-white { background: var(--white); color: var(--black); }
.btn-white:hover { background: var(--yellow); color: var(--black); }
.btn-outline-white { background: transparent; border: 2px solid var(--white); color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--black); }

/* --- Advanced Image Shapes & Layouts --- */

/* 1. Portrait Frames Collage */
.portrait-frames-collage {
	position: relative;
	width: 400px;
	height: 400px;
}
.portrait-frames-collage .frame {
	position: absolute;
	border: 6px solid var(--white);
	box-shadow: 0 15px 30px rgba(0,0,0,0.4);
	overflow: hidden;
	background: var(--white);
	border-radius: 8px;
	transition: transform 0.3s ease;
}
.portrait-frames-collage .frame:hover { transform: scale(1.05) rotate(0deg) !important; z-index: 10; }
.portrait-frames-collage .frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait-frames-collage .frame-1 {
	width: 200px; height: 260px;
	top: 0; left: 0;
	transform: rotate(-5deg);
	z-index: 2;
}
.portrait-frames-collage .frame-2 {
	width: 220px; height: 280px;
	bottom: 0; right: 0;
	transform: rotate(4deg);
	z-index: 3;
}
.portrait-frames-collage .frame-3 {
	width: 140px; height: 180px;
	top: 20px; right: 20px;
	transform: rotate(12deg);
	z-index: 1;
}

@keyframes morphBlob {
	0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
	100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* 2. Collage 2 Images (Horizontal/Landscape) */
.collage-2-images {
	position: relative;
	width: 420px;
	height: 300px;
}
.collage-2-images .img-main {
	width: 350px; height: 220px;
	object-fit: cover;
	border-radius: 15px;
	position: absolute;
	top: 0; left: 0;
	box-shadow: 0 20px 40px rgba(0,0,0,0.5);
	border: 4px solid var(--white);
	transition: transform 0.3s ease;
}
.collage-2-images .img-sub {
	width: 260px; height: 160px;
	object-fit: cover;
	border-radius: 15px;
	position: absolute;
	bottom: 0; right: 0;
	box-shadow: 0 15px 30px rgba(0,0,0,0.4);
	border: 4px solid var(--yellow);
	transition: transform 0.3s ease;
	z-index: 2;
}
.collage-2-images:hover .img-main { transform: scale(1.02) translate(-5px, -5px); }
.collage-2-images:hover .img-sub { transform: scale(1.05) translate(10px, 10px); }

/* 3. Masonry 3 Images */
.masonry-3-images {
	display: flex;
	gap: 15px;
	justify-content: center;
	align-items: center;
	margin-bottom: 0;
}
.masonry-item {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
	border: 3px solid rgba(255,255,255,0.3);
	transition: transform 0.3s ease;
}
.masonry-item:hover { transform: translateY(-10px) scale(1.02); }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; }
.masonry-item.m-1 { width: 150px; height: 200px; transform: translateY(20px); }
.masonry-item.m-2 { width: 200px; height: 250px; z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.6); }
.masonry-item.m-3 { width: 150px; height: 200px; transform: translateY(20px); }
.masonry-item.m-1:hover, .masonry-item.m-3:hover { transform: translateY(5px) scale(1.02); }

/* 4. Circle Frame */
.circle-shape {
	width: 400px; height: 400px;
	border-radius: 50%;
	overflow: hidden;
	border: 15px solid rgba(255,255,255,0.1);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 20px 40px rgba(0,0,0,0.5);
}
.circle-shape img { width: 100%; height: 100%; object-fit: cover; }

/* 5. Polygon Shape */
.polygon-shape {
	width: 400px; height: 400px;
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	overflow: hidden;
}
.polygon-shape img {
	width: 120%; height: 100%;
	object-fit: cover;
	transform: translateX(-10%); /* Adjust framing inside the clipped area */
}

/* Icons Grid in Hero (Tabs) */
.hero-icons-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 50px;
	position: relative;
	z-index: 2;
}

.hero-icon-box {
	background: var(--white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--radius-pill); /* Pill shape for button feel */
	padding: 12px 30px;
	width: auto; /* Let it grow with content */
	text-align: left;
	transition: all 0.3s ease;
	color: var(--text-main);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 12px; /* Space between icon and text */
	box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.hero-icon-box h4 {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: normal !important;
	color: var(--text-main);
	transition: color 0.3s ease;
	margin: 0 !important; /* Override any global margins */
	white-space: nowrap; /* Keep text on one line */
}

.hero-icon-box:hover, .hero-icon-box.active {
	background: var(--red-light);
	border-color: var(--red);
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(227, 38, 54, 0.1);
}

.hero-icon-box.active h4 {
	color: var(--red);
}

.hero-icon-box i {
	font-size: 24px; /* Smaller icon to match text */
	margin-bottom: 0; /* Remove bottom margin */
	color: var(--red);
	transition: color 0.3s ease;
}

/* Footer */
.site-footer {
	background: var(--black);
	padding: 50px 0;
	text-align: center;
	color: rgba(255,255,255,0.7);
}
.site-footer h2 span { color: var(--red); }
.site-footer a { color: rgba(255,255,255,0.7); }
.site-footer a:hover { color: var(--yellow); }

/* Team Feature Tabs */
.team-tabs {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.team-tab-button {
	background: var(--white);
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: var(--radius-lg);
	padding: 15px 25px;
	display: flex;
	align-items: center;
	gap: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: var(--text-main);
	min-width: 200px;
	text-align: left;
	font-family: var(--font-body);
	box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.team-tab-button:hover, .team-tab-button.active {
	background: var(--red-light);
	border-color: var(--red);
}
.team-tab-button.active h4 {
	color: var(--red);
}
.tab-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid transparent;
	transition: all 0.3s ease;
}
.team-tab-button.active .tab-avatar {
	border-color: var(--red);
}
.tab-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.team-galleries-container {
	position: relative;
	min-height: 400px;
}
.team-gallery-panel {
	display: none;
	animation: fadeIn 0.5s ease;
}
.team-gallery-panel.active {
	display: block;
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Utility */
.glass-icon-wrapper {
	width: 60px; height: 60px; 
	border-radius: 50%; 
	display: flex; align-items: center; justify-content: center; 
	font-size: 24px;
	background: var(--red-light);
	border: 1px solid rgba(227, 38, 54, 0.1);
	color: var(--red);
}


/* ==========================================================================
   MEDIA QUERIES (Mobile Responsiveness)
   ========================================================================== */

@media (max-width: 992px) {
	.grid-3, .grid-4, .grid-5, .app-gallery-grid, .team-gallery-panel .app-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.hero-slider-main {
		padding: 30px 0 10px; /* Massively reduced top margin/padding above the title to remove empty space */
	}

	/* Header overrides */
	.site-logo a {
		font-size: 20px; /* Modern safe size for mobile */
	}
	
	.mobile-menu-toggle {
		display: block;
	}
	
	.header-right-panel {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: var(--white);
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
		gap: 20px;
		box-shadow: 0 10px 15px rgba(0,0,0,0.05);
		display: none;
		border-top: 1px solid rgba(0,0,0,0.05);
	}
	
	.header-right-panel.active {
		display: flex;
	}
	
	.main-navigation ul {
		flex-direction: column;
		width: 100%;
		gap: 15px;
	}
	
	.main-navigation ul li {
		width: 100%;
		border-bottom: 1px solid rgba(0,0,0,0.05);
		padding-bottom: 10px;
	}
	
	.main-navigation ul li:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	
	.header-actions, .header-actions .btn {
		width: 100%;
	}
	
	/* Mobile Menu Link Colors (always dark because background is white) */
	.main-navigation a {
		color: var(--text-main) !important;
	}
	.site-header:not(.scrolled) .mobile-menu-toggle {
		color: var(--white);
	}
	.site-header.scrolled .mobile-menu-toggle {
		color: var(--black);
	}
	
	/* Layout overrides */
	.grid-2, .grid-3, .grid-4, .grid-5 {
		grid-template-columns: 1fr;
	}
	
	/* 2-Column Gallery Grid */
	.app-gallery-grid, .team-gallery-panel .app-gallery-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.app-gallery-grid > div, .app-gallery-grid > img {
		height: 150px;
	}
	
	/* 2-Column Team Cards Grid */
	.team-tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.team-tab-button {
		min-width: 0;
		padding: 10px;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 8px;
	}
	
	/* Hero layout overrides */
	.hero-slider-content {
		min-height: 400px; /* Halved height for mobile */
	}
	.hero-slide-content {
		flex-direction: column !important;
		text-align: center !important;
		gap: 15px; /* Reduced gap */
		padding-top: 10px;
	}
	.slide-text-part {
		text-align: center !important;
	}
	.slide-media-part {
		order: -1; /* Always show image on top of text on mobile */
		margin-bottom: 10px;
	}
	.slide-features {
		justify-content: center !important;
		gap: 10px;
		margin-bottom: 15px;
	}
	.slide-features li {
		font-size: 12px;
		padding: 3px 10px;
	}
	.slide-price {
		font-size: 16px;
		margin-bottom: 15px;
	}
	.slide-btn {
		padding: 10px 20px;
		font-size: 14px;
	}
	
	/* Shape sizing overrides for mobile (Reduced by ~50%) */
	.circle-shape, .polygon-shape {
		width: 150px;
		height: 150px;
	}
	.portrait-frames-collage {
		width: 150px;
		height: 180px;
	}
	.portrait-frames-collage .frame { border-width: 3px; }
	.portrait-frames-collage .frame-1 {
		width: 80px; height: 100px;
	}
	.portrait-frames-collage .frame-2 {
		width: 100px; height: 120px;
	}
	.portrait-frames-collage .frame-3 {
		width: 60px; height: 80px;
		top: 10px; right: 10px;
	}
	.collage-2-images {
		width: 160px;
		height: 110px;
	}
	.collage-2-images .img-main {
		width: 130px;
		height: 80px;
	}
	.collage-2-images .img-sub {
		width: 100px;
		height: 60px;
		border-width: 3px;
	}
	.masonry-3-images {
		gap: 5px;
		margin-bottom: 0;
	}
	.masonry-item.m-1, .masonry-item.m-3 {
		width: 75px;
		height: 100px;
	}
	.masonry-item.m-2 {
		width: 100px;
		height: 130px;
	}

	/* Hero title size safe */
	.hero-title {
		font-size: 32px;
		margin-bottom: 5px; /* Extremely small margin above title */
	}
	.hero-subtitle {
		font-size: 14px;
		margin-bottom: 10px;
	}
	
	.section-title {
		font-size: 28px;
	}
	
	/* Horizontal Scroll for Hero Cards on Mobile */
	.hero-icons-grid {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-top: 10px; /* Space for the active card's upward transform */
		padding-bottom: 15px;
		/* Hide scrollbar for a cleaner look, optional */
		scrollbar-width: none; 
	}
	.hero-icons-grid::-webkit-scrollbar {
		display: none;
	}
	.hero-icon-box {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}