/* ========================================
   ICICI 2026 - Complete Custom Stylesheet
   No Tailwind dependencies
   ======================================== */

/* Center images inside the about-section columns (vertically + horizontally) */
.about-section-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-section-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

@media (min-width: 769px) {
	.about-section-image img {
		height: 50vh;
		object-fit: cover;
	}
}

/* ========================================
   Base Styles
   ======================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	width: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: #f5f5f5;
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.about-title {
	font-size: 5rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	text-align: center;
	margin-bottom: 0px;
	white-space: nowrap;
	font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
	background: linear-gradient(
		to bottom,
		rgb(8 42 123 / 35%) 30%,
		rgb(255 255 255 / 0%) 76%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.carousel-wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 80px auto 60px;
	padding: 0 16px;
	position: relative;
	overflow: hidden;
}

.carousel-container {
	width: 100%;
	max-width: 1200px;
	height: 28rem;
	position: relative;
	perspective: 1000px;
	margin: 0 auto;
	padding: 0 16px;
	overflow: hidden;
}
	
.scroller {
	width: 100%;
	max-width: 1200px;
	margin: 80px auto 60px;
	padding: 0 16px;
	position: relative;
	overflow: hidden;
}

.carousel-track {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card {
	position: absolute;
	width: 18rem;
	height: 24rem;
	background: white;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.card-image {
	width: 100%;
	height: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-content {
	width: 100%;
	height: 50%;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: white;
}

.card-title {
	font-family: 'Poppins', sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: #082A7B;
	margin-bottom: 0.5rem;
	text-align: center;
}

.card-subtitle {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	color: #666;
	text-align: center;
	opacity: 0.8;
}

.card-accent {
	width: 3rem;
	height: 0.25rem;
	margin-top: 0.75rem;
	border-radius: 0.125rem;
}

.card.center {
	z-index: 10;
	transform: scale(1.1) translateZ(0);
	filter: grayscale(0%);
}

.card.left-2 {
	z-index: 1;
	transform: translateX(-32rem) scale(0.8) translateZ(-300px);
	opacity: 0.7;
	filter: grayscale(80%);
}

.card.left-1 {
	z-index: 5;
	transform: translateX(-16rem) scale(0.9) translateZ(-100px);
	opacity: 0.9;
	filter: grayscale(80%);
}

.card.right-1 {
	z-index: 5;
	transform: translateX(16rem) scale(0.9) translateZ(-100px);
	opacity: 0.9;
	filter: grayscale(80%);
}

.card.right-2 {
	z-index: 1;
	transform: translateX(32rem) scale(0.8) translateZ(-300px);
	opacity: 0.7;
	filter: grayscale(80%);
}

.card.hidden {
	opacity: 0;
	pointer-events: none;
}

.member-info {
	text-align: center;
	margin-top: 40px;
	transition: all 0.5s ease-out;
}

.member-name {
	color: rgb(8, 42, 123);
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	display: inline-block;
}

.member-name::before,
.member-name::after {
	content: "";
	position: absolute;
	top: 100%;
	width: 100px;
	height: 2px;
	background: rgb(8, 42, 123);
}

.member-name::before {
	left: -120px;
}

.member-name::after {
	right: -120px;
}

.member-role {
	color: #848696;
	font-size: 1.5rem;
	font-weight: 500;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 10px 0;
	margin-top: -15px;
	position: relative;
	text-align: center;
}
.dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 60px;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(8, 42, 123, 0.2);
	cursor: pointer;
	transition: all 0.3s ease;
}

.dot.active {
	background: rgb(8, 42, 123);
	transform: scale(1.2);
}

.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(8, 42, 123, 0.6);
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: all 0.3s ease;
	font-size: 1.5rem;
	border: none;
	outline: none;
	padding-bottom: 4px;
}

.nav-arrow:hover {
	background: rgba(0, 0, 0, 0.8);
	transform: translateY(-50%) scale(1.1);
}

.nav-arrow.left {
	left: 20px;
	padding-right: 3px;
}

.nav-arrow.right {
	right: 20px;
	padding-left: 3px;
}

@media (max-width: 1024px) {
	.about-title {
		font-size: 2.5rem;
		white-space: nowrap;
		margin-bottom: -40px;
	}

	/* KIET Image Slider mobile height */
	#kietImageSlider {
		height: 30vh !important;
	}

	.carousel-wrapper,
	.carousel-container,
	.scroller {
		overflow: hidden !important;
		max-width: 100vw !important;
	}

	.carousel-container {
		height: 22rem;
	}

	.card {
		width: 180px;
		height: 250px;
	}

	.card.left-2 {
		transform: translateX(-200px) scale(0.7) translateZ(-300px);
		opacity: 0.5;
	}

	.card.left-1 {
		transform: translateX(-100px) scale(0.85) translateZ(-100px);
	}

	.card.right-1 {
		transform: translateX(100px) scale(0.85) translateZ(-100px);
	}

	.card.right-2 {
		transform: translateX(200px) scale(0.7) translateZ(-300px);
		opacity: 0.5;
	}

	.member-name {
		font-size: 1.8rem;
	}

	.member-role {
		font-size: 1rem !important;
		text-align: center !important;
		width: 100% !important;
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	.member-info {
		text-align: center !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}

	.member-name::before,
	.member-name::after {
		width: 40px;
	}

	.member-name::before {
		left: -50px;
	}

	.member-name::after {
		right: -50px;
	}
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Duplicate body block removed - using main body styles at line 36 */

body.menu-open {
    overflow: hidden;
}

/* ========================================
   Poster Section
   ======================================== */
.poster-section {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.poster-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.poster-image {
    width: 100%;
    height: auto;
    object-position: center;
    display: block;
}

/* Navigation Section */
nav {
	/* Start with relative positioning, JS will switch to fixed when scrolled */
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000; /* raise above large hero title */
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 1rem 2rem;
	transition: all 0.3s ease;
	min-height: 60px;
}

nav.sticky {
	/* When scrolled, switch to fixed positioning like React app */
	position: fixed;
	top: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Hide KIET logo on desktop */
.navbar-logo {
    display: none;
}

/* Desktop Navigation */
.nav-links {
    display: flex;
    list-style: none;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

.nav-links li a {
	color: #333;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
	position: relative;
	padding: 0.5rem 0.7rem;
	display: block;
}

.nav-links li a::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: -6px;
	left: 0;
	background-color: currentColor;
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}

.nav-links li a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

.nav-links li a:hover {
	color: #40E0D0;
	transition: all 0.25s ease-out;

}

/* Mobile Menu Button */
.mobile-menu-icon {
    display: none;
    background: transparent;
    border: none;
    color: #333;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 2001;
    border-radius: 4px;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
	/* Hidden by default to avoid accidental blocking on desktop or in odd layouts.
	   When the mobile menu is opened JS will add the 'active' class to reveal it. */
	position: fixed;
	top: 80px;
	right: 0;
	width: 100vw;
	height: 60vh;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
	z-index: 1001;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	padding-top: 1rem;
	overflow: hidden;

	/* Invisible by default */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px) scale(0.995);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.mobile-nav-overlay.active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.mobile-nav-overlay.closing {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px) scale(0.995);
}

.mobile-nav-links {
    list-style: none;
    padding: 0 1.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.mobile-nav-links li {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-overlay.active .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-links li:nth-child(1) { transition-delay: 0.05s; }
.mobile-nav-links li:nth-child(2) { transition-delay: 0.10s; }
.mobile-nav-links li:nth-child(3) { transition-delay: 0.15s; }
.mobile-nav-links li:nth-child(4) { transition-delay: 0.20s; }
.mobile-nav-links li:nth-child(5) { transition-delay: 0.25s; }
.mobile-nav-links li:nth-child(6) { transition-delay: 0.30s; }
.mobile-nav-links li:nth-child(7) { transition-delay: 0.35s; }
.mobile-nav-links li:nth-child(8) { transition-delay: 0.40s; }

.mobile-nav-overlay.closing .mobile-nav-links li:nth-child(1) { transition-delay: 0.21s; }
.mobile-nav-overlay.closing .mobile-nav-links li:nth-child(2) { transition-delay: 0.18s; }
.mobile-nav-overlay.closing .mobile-nav-links li:nth-child(3) { transition-delay: 0.15s; }
.mobile-nav-overlay.closing .mobile-nav-links li:nth-child(4) { transition-delay: 0.12s; }
.mobile-nav-overlay.closing .mobile-nav-links li:nth-child(5) { transition-delay: 0.09s; }
.mobile-nav-overlay.closing .mobile-nav-links li:nth-child(6) { transition-delay: 0.06s; }
.mobile-nav-overlay.closing .mobile-nav-links li:nth-child(7) { transition-delay: 0.03s; }
.mobile-nav-overlay.closing .mobile-nav-links li:nth-child(8) { transition-delay: 0s; }

.mobile-nav-links li a {
    color: #334155;
    text-decoration: none;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    display: block;
    position: relative;
    border: 1px solid transparent;
    text-align: center;
    width: 200px;
    white-space: nowrap;
}

.mobile-nav-links li a:hover {
    color: #40E0D0;
    background-color: rgba(64, 224, 208, 0.08);
    border-color: rgba(64, 224, 208, 0.2);
    transform: scale(1.05);
}

/* Mobile Menu Backdrop */
.mobile-backdrop {
    position: fixed;
    top: calc(80px + 60vh);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-backdrop.closing {
    opacity: 0;
}

/* Desktop Text Justification - applies to all paragraphs and content divs */
p, .about-section p, .hero-section p, div[style*="padding"] p,
section p, .content-text, div.text-content, 
.track-content, .submission-box p, .committee-content,
.speaker-card p, .sponsor-text, .contact-card p {
    text-align: justify;
}

/* Mobile and Tablet Responsive */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-icon {
        display: block;
    }

	/* Ensure navbar is properly positioned in mobile */
	nav {
		position: relative !important;
		width: 100% !important;
		padding: 1rem 1.5rem !important;
	}

	nav.sticky {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 2000 !important;
		background-color: rgba(255, 255, 255, 0.98) !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
	}

	/* Mobile view padding utilities */
	.mobileview-mainpadding {
		padding: 1.5rem 0.5rem !important;
	}

	.mobileview-notmainpadding {
		padding: 1rem !important;
	}

	/* Override inline padding: 4rem 2rem to 2rem 1rem on mobile */
	section[style*="padding: 4rem 2rem"],
	div[style*="padding: 4rem 2rem"] {
		padding: 2rem 1rem !important;
	}

	/* Override inline padding: 2rem to 1rem on mobile */
	div[style*="padding: 2rem"] {
		padding: 1rem !important;
	}

	/* Override text justification to left alignment on mobile */
	p, .about-section p, .hero-section p, div[style*="padding"] p,
	section p, .content-text, div.text-content, 
	.track-content, .submission-box p, .committee-content,
	.speaker-card p, .sponsor-text, .contact-card p {
		text-align: left !important;
	}

	/* Keep footer copyright centered on mobile */
	.footer-bottom-bar p {
		text-align: center !important;
	}
}

/* Mobile-only helper: hide by default, show and bold on mobile */
.mobile-only-text {
	display: none !important;
}

.desktop-only-text {
	display: flex !important;
}

@media (max-width: 1024px) {
	.mobile-only-text {
		display: block !important;
		font-weight: 700; /* bolder text only on mobile */
		text-align: left;
	}
	.desktop-only-text {
		display: none !important;
	}

	/* Show KIET logo on mobile navbar (left side) */
	.navbar-logo {
		display: block !important;
		position: absolute;
		left: 1.5rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2001;
	}

	/* Ensure all major containers are constrained */
	.container, 
	.section, 
	.hero-section,
	.video-section,
	.tracks-orbit-section {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		box-sizing: border-box !important;
	}

	.responsive-row {
		flex-direction: column !important;
		gap: 1rem !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 1rem !important;
	}

	/* Reorder Exploring ICICI section - text first, then image in mobile */
	.responsive-row .about-section-image {
		order: 2 !important;
	}
	
	.responsive-row .about-section-text {
		order: 1 !important;
	}

	.sidebar {
		width: 100% !important;
		margin-bottom: 2rem;
	}

	.responsive-row > div {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.responsive-row img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* Hero section mobile adjustments */
	.hero-section {
		height: auto !important;
		padding-top: 0px !important;
		min-height: 100vh !important;
	}

	.hero-section > div:first-of-type {
		height: auto !important;
		min-height: 50vh !important;
		padding: 2rem 1rem !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left !important;
		gap: 1rem !important;
	}

	.hero-section > div:first-of-type > div {
		max-width: 100% !important;
		position: relative !important;
		text-align: left !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.hero-section > div:first-of-type h1 {
		font-size: 2.5rem !important;
		text-align: left !important;
	}

	.hero-section > div:first-of-type p {
		font-size: 1rem !important;
		text-align: left !important;
		max-width: 100% !important;
	}

	/* Mobile-only text in hero section */
	.hero-section .mobile-only-text {
		text-align: left !important;
		padding-left: 0 !important;
	}

	.hero-section .mobile-only-text div {
		text-align: left !important;
	}

	.hero-section > div:last-of-type {
		height: auto !important;
		min-height: 50vh !important;
		padding: 2rem 1rem !important;
	}

	.hero-section > div:last-of-type h2 {
		font-size: 1.8rem !important;
	}

	.hero-section > div:last-of-type > div > div {
		flex-direction: column !important;
		gap: 1rem !important;
		align-items: flex-start !important;
	}
}

/* Mobile Poster */
@media (max-width: 1024px) {
    .mobile-nav-overlay {
        top: 80px;
    }
}

/* ========================================
   Footer Styles
   ======================================== */
.new-footer-container {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: 4rem;
}

.footer-socials-section {
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e2e8f0;
}

.social-icons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.social-icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    transition: transform 0.2s ease-in-out;
    text-decoration: none;
}

.social-icon-link:hover {
    transform: scale(1.1);
}

.footer-bottom-bar {
    background-color: #163b64;
    color: #ffffff;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.footer-bottom-bar p {
    margin: 0;
    text-align: center;
}

/* ========================================
   Sidebar Cards - Center Content
   ======================================== */
div[style*="background-color: #4a5568"] p,
div[style*="background-color: #4a5568"] div {
    text-align: center !important;
}

/* ========================================
   Scroll to Top Button with Progress
   ======================================== */
.scroll-to-top-progress {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #2274d2;
    border: none;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    animation: fadeIn 0.3s ease-in-out;
}

.scroll-to-top-progress:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.25);
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-ring__circle-bg {
    stroke: rgba(255, 255, 255, 0.25);
}

.progress-ring__circle {
    stroke: #ffffff;
    transition: stroke-dashoffset 0.1s linear;
    stroke-dasharray: 144.51;
    stroke-dashoffset: 144.51;
}

.progress-arrow {
    color: #ffffff;
    font-size: 1.5rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ========================================
   Page-Specific Styles
   ======================================== */

/* Call for Papers (submission.html) */
.track-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.track-item {
    border-bottom: 1px solid #e2e8f0;
}

.track-item:last-child {
    border-bottom: none;
}

.track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1rem 1.5rem;
    background-color: white;
    transition: background-color 0.2s ease-in-out;
}

.track-header:hover {
    background-color: #f7fafc;
}

.track-header.active {
    background-color: #f7fafc;
}

.track-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    color: #2d3748;
    margin: 0;
    font-weight: 600;
}

.track-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background-color: #fdfdff;
}

.track-content.open {
    max-height: 2000px;
}

/* Track content list styling for better readability */
.track-content p {
    font-family: Poppins;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 1rem 1.5rem;
}

.track-content ul {
    list-style-type: disc;
    padding-left: 2.5rem;
    margin: 1rem 1.5rem;
}

.track-content ul li {
    font-family: Poppins;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
    margin: 0.5rem 0;
    padding-left: 0.5rem;
}

.track-content ul li::marker {
    color: #000000;
    font-size: 1.1rem;
}

/* Paper Submission Guidelines (guid.html) */
.submission-box {
    background-color: #f0f4f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.submission-box.green {
    background-color: #f0fdf4;
}

/* Committee (committee.html) */
.committee-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.committee-item {
    border-bottom: 1px solid #e2e8f0;
}

.committee-item:last-child {
    border-bottom: none;
}

.committee-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1rem 1.5rem;
    background-color: white;
    transition: background-color 0.2s ease-in-out;
}

.committee-header:hover {
    background-color: #f7fafc;
}

.committee-header.active {
    background-color: #f7fafc;
}

.committee-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    color: #2d3748;
    margin: 0;
    font-weight: 600;
}

.committee-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
    background-color: #fdfdff;
}

.committee-content.open {
    max-height: 5000px;
}

.committee-content ul {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.8;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    margin: 0;
}

.committee-content ul li {
    margin-bottom: 0.25rem;
}

/* Registration (sponsors.html) */
.reg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Poppins;
}

.reg-table th {
    background-color: #e2e8f0;
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    border-bottom: 2px solid #cbd5e0;
}

.reg-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
    font-size: 0.85rem;
}

/* Contact Us (contact-us.html) */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.contact-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-name {
    font-size: 1.2rem;
    color: #333;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.contact-title {
    font-size: 1rem;
    color: #05B8A8;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
}

.contact-details p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

.contact-details i {
    color: #05B8A8;
    width: 16px;
}

.map-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.map-section h2 {
    font-size: 1.8rem;
    color: #333;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.map-container {
    width: 100%;
    height: 350px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.map-container iframe {
    border: 0;
}

.authors-section {
    margin-top: 3rem;
}

.authors-section h2 {
    font-size: 1.8rem;
    color: #333;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.authors-box {
    background-color: rgba(0, 0, 100, 0.8);
    padding: 1.5rem;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.authors-box p {
    font-size: 1rem;
    color: white;
    margin: 0;
}

.authors-box button {
    background-color: white;
    color: black;
    border: none;
    border-radius: 5px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.authors-box button:hover {
    background-color: #f0f0f0;
}

/* Responsive Styles for Page-Specific Content */
@media (max-width: 1024px) {
    .sidebar {
        width: 100% !important;
        margin-bottom: 2rem;
    }
    .responsive-row {
        flex-direction: column !important;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Page-Specific Styles
   ======================================== */

/* Call for Papers (submission.html) */
.track-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.track-item {
    border-bottom: 1px solid #e2e8f0;
}

.track-item:last-child {
    border-bottom: none;
}

.track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1rem 1.5rem;
    background-color: white;
    transition: background-color 0.2s ease-in-out;
}

.track-header:hover {
    background-color: #f7fafc;
}

.track-header.active {
    background-color: #f7fafc;
}

.track-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    color: #2d3748;
    margin: 0;
    font-weight: 600;
}

.track-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background-color: #fdfdff;
}

.track-content.open {
    max-height: 2000px;
}

/* Paper Submission Guidelines (guid.html) */
.submission-box {
    background-color: #f0f4f8;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.submission-box.green {
    background-color: #f0fdf4;
}

/* Committee (committee.html) */
.committee-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.committee-item {
    border-bottom: 1px solid #e2e8f0;
}

.committee-item:last-child {
    border-bottom: none;
}

.committee-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1rem 1.5rem;
    background-color: white;
    transition: background-color 0.2s ease-in-out;
}

.committee-header:hover {
    background-color: #f7fafc;
}

.committee-header.active {
    background-color: #f7fafc;
}

.committee-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    color: #2d3748;
    margin: 0;
    font-weight: 600;
}

.committee-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
    background-color: #fdfdff;
}

.committee-content.open {
    max-height: 5000px;
}

.committee-content ul {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.8;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    margin: 0;
}

.committee-content ul li {
    margin-bottom: 0.25rem;
}

/* Registration (sponsors.html) */
.reg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Poppins;
}

.reg-table th {
    background-color: #e2e8f0;
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    border-bottom: 2px solid #cbd5e0;
}

.reg-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
    font-size: 0.85rem;
}

/* Contact Us (contact-us.html) */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.contact-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-name {
    font-size: 1.2rem;
    color: #333;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.contact-title {
    font-size: 1rem;
    color: #05B8A8;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
}

.contact-details p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

.contact-details i {
    color: #05B8A8;
    width: 16px;
}

.map-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.map-section h2 {
    font-size: 1.8rem;
    color: #333;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.map-container {
    width: 100%;
    height: 350px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.map-container iframe {
    border: 0;
}

.authors-section {
    margin-top: 3rem;
}

.authors-section h2 {
    font-size: 1.8rem;
    color: #333;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.authors-box {
    background-color: rgba(0, 0, 100, 0.8);
    padding: 1.5rem;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.authors-box p {
    font-size: 1rem;
    color: white;
    margin: 0;
}

.authors-box button {
    background-color: white;
    color: black;
    border: none;
    border-radius: 5px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.authors-box button:hover {
    background-color: #f0f0f0;
}

/* Responsive Styles for Page-Specific Content */
@media (max-width: 1024px) {
    .sidebar {
        width: 100% !important;
        margin-bottom: 2rem;
    }
    .responsive-row {
        flex-direction: column !important;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
}