/* =========================================================
   MISSING STYLES — add this to (or link alongside) the
   existing <style> block in about.html, contact.html,
   services.html and portfolio.html
   ========================================================= */

/* ---------- PAGE HEADER (About / Contact / Services / Portfolio) ---------- */
.page-header {
	background: linear-gradient(135deg, rgba(15,12,41,0.95), rgba(48,43,99,0.9)),
		url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80")
		center/cover no-repeat;
	color: #fff;
	padding: 90px 0 55px;
}
.page-header .page-title { font-size: 2.6rem; font-weight: 800; margin-bottom: 10px; }
.page-header .breadcrumb { margin-bottom: 0; }
.page-header .breadcrumb-item a { color: #00d2ff; text-decoration: none; }
.page-header .breadcrumb-item.active { color: rgba(255,255,255,0.7); }

/* ---------- ABOUT PAGE ---------- */
.about-img-bg {
	position: absolute; top: -20px; left: -20px;
	width: 100%; height: 100%;
	background: var(--cws-gradient);
	border-radius: 1rem; opacity: .15; z-index: 0;
}
.about-image { border-radius: 1rem; box-shadow: 0 15px 40px rgba(0,0,0,0.15); position: relative; z-index: 1; }

.mv-card { background: #fff; padding: 2.5rem; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.06); height: 100%; }
.mv-icon {
	font-size: 2.5rem; display: inline-block; margin-bottom: 1rem;
	background: var(--cws-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.value-box { text-align: center; padding: 1.5rem; }
.value-icon-circle {
	width: 70px; height: 70px; border-radius: 50%; background: #fff;
	box-shadow: 0 5px 20px rgba(0,0,0,0.08);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem; font-size: 1.6rem;
}
.value-icon-circle i { background: var(--cws-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- CONTACT PAGE ---------- */
.contact-info-panel {
	background: linear-gradient(135deg, #0f0c29, #302b63);
	color: #fff; border-radius: 1.5rem; padding: 2.5rem; height: 100%;
}
.info-item { display: flex; align-items: flex-start; margin-bottom: 1.8rem; }
.info-icon {
	min-width: 50px; height: 50px; border-radius: 50%;
	background: rgba(255,255,255,0.1);
	display: flex; align-items: center; justify-content: center;
	margin-right: 15px; font-size: 1.1rem;
}
.info-content h5 { color: #fff; font-weight: 700; margin-bottom: 4px; }
.info-content p { opacity: .85; margin-bottom: 0; }

.contact-form-panel { background: #fff; border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
.map-container { border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); line-height: 0; }

/* ---------- SERVICES PAGE ---------- */
.bg-light-blue { background-color: var(--qg-light); }

.service-card {
	background: #fff; border-radius: 1rem; padding: 2.5rem 2rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	transition: all .3s ease; height: 100%;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(37,117,252,0.15); }
.service-icon {
	width: 80px; height: 80px; border-radius: 50%;
	background: var(--cws-gradient); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 2rem; margin: 0 auto 1.5rem;
}
.service-title { font-weight: 800; color: var(--qg-dark); margin-bottom: .75rem; }
.service-list { list-style: none; padding: 0; margin-top: 1rem; text-align: left; }
.service-list li { padding: 6px 0; border-bottom: 1px dashed #eee; color: var(--qg-grey); font-size: .95rem; }
.service-list li:last-child { border-bottom: none; }

.ai-section { background: linear-gradient(135deg, #0f0c29, #302b63); color: #fff; padding: 80px 0; }
.ai-chip { display: inline-block; background: rgba(255,255,255,0.1); padding: 6px 16px; border-radius: 50px; font-size: .85rem; margin-bottom: 1rem; }
.ai-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; padding: 1.5rem; color: #fff; }

.cta-box { background: var(--cws-gradient); border-radius: 1.5rem; padding: 60px 40px; color: #fff; text-align: center; }

/* ---------- PORTFOLIO PAGE ---------- */
.portfolio-filters {
	list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
	gap: 10px; padding: 0; margin-bottom: 2rem;
}
.portfolio-filters li {
	padding: 8px 20px; border-radius: 50px; background: #f0f4ff;
	color: var(--qg-dark); font-weight: 600; cursor: pointer; font-size: .9rem;
	transition: all .3s;
}
.portfolio-filters li.filter-active,
.portfolio-filters li:hover { background: var(--cws-gradient); color: #fff; }

.portfolio-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.07); height: 100%; }
.portfolio-img-wrapper { position: relative; overflow: hidden; }
.portfolio-img-wrapper img { width: 100%; height: 220px; object-fit: cover; transition: transform .5s; display: block; }
.portfolio-card:hover .portfolio-img-wrapper img { transform: scale(1.08); }
.category-tag {
	position: absolute; top: 15px; left: 15px;
	background: rgba(15,12,41,0.8); color: #fff;
	padding: 4px 12px; border-radius: 50px; font-size: .75rem;
}
.portfolio-content { padding: 1.5rem; }
.portfolio-title { font-size: 1.15rem; font-weight: 700; color: var(--qg-dark); margin-bottom: .5rem; }
.portfolio-desc { font-size: .9rem; color: var(--qg-grey); margin: 0; }