/* ============================================================
   Muhammad Haseeb Khan - pixel-matched layout stylesheet
   Colors / widths / fonts sourced from reference markup.
   Background graphics recreated in pure CSS (gradients / borders)
   instead of reusing the original site's proprietary image files.
   ============================================================ */

* { box-sizing: border-box; }

body {
	cursor: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: rgb(192, 214, 248);
	margin: 0;
	padding: 0;
	background-color: rgb(6, 34, 74);
	background-image: linear-gradient(rgb(9, 45, 92), rgb(6, 34, 74));
	background-repeat: repeat-x;
}

a { text-decoration: none; }

#wrap {
	width: 100%;
	max-width: 955px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

/* ---------- Header / logo bar (flex-based - never overlaps) ---------- */
#header {
	width: 100%;
	position: relative;
	background: linear-gradient(135deg, rgb(9, 45, 92), rgb(6, 34, 74));
	border-bottom: 2px solid rgb(213, 142, 16);
	overflow: hidden;
}
#header-topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 8px 20px;
	background: rgba(0, 0, 0, 0.18);
	flex-wrap: wrap;
}
#header-contact {
	color: rgb(130, 185, 20);
	font-size: 11.5px;
	font-weight: bold;
	white-space: nowrap;
}
#header-contact a { color: rgb(130, 185, 20); }
#header-main {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 20px 0 20px;
	min-height: 120px;
}
#header-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 16px;
	max-width: 480px;
}
#logo {
	font-family: Tahoma, Calibri, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: rgb(248, 248, 248);
	line-height: 1.25;
}
#logo span { color: rgb(213, 142, 16); }
#header-tagline {
	color: rgb(192, 214, 248);
	font-size: 11.5px;
	margin-top: 6px;
	letter-spacing: 0.3px;
}
#header-character {
	height: 130px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	object-position: bottom;
	display: block;
	margin-left: auto;
}

/* ---------- Nav ---------- */
.nav-toggle { display: none; }
.nav-toggle-label {
	display: none;
	cursor: pointer;
	padding: 12px 20px;
	background: rgb(238, 240, 243);
	color: rgb(6, 34, 74);
	font-weight: 700;
	font-size: 13px;
	width: 100%;
	box-sizing: border-box;
}
.nav-toggle-label::after { content: " ▾"; }
#nav_wrap {
	width: 100%;
	padding: 0 5px;
	box-sizing: border-box;
}
#nav_menu {
	background-color: rgb(238, 240, 243);
	background-image: linear-gradient(rgb(250, 250, 250), rgb(225, 228, 233));
	width: 100%;
	position: relative;
}
#nav_menu ul {
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	font-weight: 700;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#nav_menu ul li { display: inline-block; position: relative; }
#nav_menu ul li a {
	display: inline-block;
	color: rgb(73, 73, 73);
	padding: 12px 24px;
	margin: 0;
	text-decoration: none;
	border-right: 0.8px solid rgb(218, 218, 218);
	font-size: 12px;
}
#nav_menu ul li:last-child a { border-right: none; }
#nav_menu ul li a:hover { color: rgb(213, 142, 16); }

.dropmenudiv {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	border-width: 0.8px 0.8px 0px;
	border-style: solid;
	border-color: rgb(187, 187, 187);
	font: 12px/18px Verdana;
	z-index: 100;
	background-color: rgb(255, 255, 255);
	width: 200px;
	text-align: left;
}
#nav_menu ul li:hover .dropmenudiv { display: block; }
.dropmenudiv a {
	width: auto;
	display: block;
	text-indent: 3px;
	border-bottom: 0.8px solid rgb(187, 187, 187);
	padding: 6px 0;
	text-decoration: none;
	font-weight: 400;
	color: rgb(0, 0, 0);
}
.dropmenudiv a:hover { background: rgb(245, 245, 245); }

/* ---------- Body layout row ---------- */
#body_row {
	width: 100%;
	padding-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	box-sizing: border-box;
}

/* ---------- Package boxes ---------- */
.pkg {
	flex: 1 1 220px;
	min-width: 210px;
	display: flex;
	flex-direction: column;
}
.pkg-head {
	min-height: 37px;
	background: linear-gradient(rgb(20, 65, 120), rgb(8, 35, 72));
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	display: flex;
	align-items: center;
	padding: 8px 12px;
}
.pkg-head h2 {
	font-family: Tahoma, Calibri, sans-serif;
	font-size: 17px;
	color: rgb(248, 248, 248);
	font-weight: 400;
	margin: 0;
}
.pkg-body {
	background-color: rgb(8, 35, 72);
	width: 100%;
	min-height: 200px;
	padding-top: 4px;
	flex: 1;
	box-sizing: border-box;
}
.pkg-body ul { padding-left: 4px; margin-top: 5px; list-style: none; }
.pkg-body ul li {
	color: rgb(213, 142, 16);
	font-size: 10.5px;
	padding-left: 13px;
	margin-top: 8px;
	margin-bottom: 8px;
	position: relative;
}
.pkg-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 5px;
	height: 5px;
	background: rgb(213, 142, 16);
	border-radius: 50%;
}
.pkg-order {
	padding: 0 20px 10px 20px;
	text-align: right;
	font-size: 13px;
}
.pkg-order a {
	font-weight: 700;
	color: rgb(253, 123, 30);
	text-decoration: none;
}
.pkg-foot {
	width: 100%;
	height: 12px;
	background-color: rgb(8, 35, 72);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

/* ---------- Content box (used on homepage next to packages) ---------- */
.content-col { flex: 1 1 100%; width: 100%; box-sizing: border-box; }
.content-col-full { width: 100%; padding-top: 8px; box-sizing: border-box; }

.content-box {
	width: 100%;
	background-color: rgb(8, 42, 88);
	padding: 8px 16px 16px 16px;
	border-radius: 6px;
}
.content-box h1 {
	color: rgb(248, 248, 248);
	font-size: 16px;
}
.content-box h1 strong { color: rgb(213, 142, 16); }
.content-box p { text-align: justify; color: rgb(220, 228, 240); line-height: 1.6; }
.content-box b { color: rgb(255, 255, 255); }
.content-box strong { color: rgb(213, 142, 16); }
.content-box a { color: rgb(130, 185, 20); text-decoration: none; }
.content-box a:hover { text-decoration: underline; }
.content-box .lead-img {
	float: right;
	display: block;
	margin: 0 0 10px 15px;
	border: 2px solid rgb(213, 142, 16);
	border-radius: 4px;
}
.content-box .service-title {
	font-size: 15px;
	color: rgb(248, 248, 248);
	font-weight: 700;
}

/* ---------- Portfolio grid (used inside content-box) ---------- */
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }
.portfolio-item {
	border: 1px dotted rgb(213, 142, 16);
	display: flex;
	padding: 12px;
	gap: 12px;
	border-radius: 4px;
}
.portfolio-item .thumb {
	width: 30%;
	background-color: rgb(6, 34, 74);
	color: rgb(213, 142, 16);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10.5px;
	text-align: center;
	padding: 8px;
	border-radius: 3px;
	min-height: 90px;
}
.portfolio-item .details { width: 70%; font-size: 11.5px; color: rgb(220, 228, 240); }
.portfolio-item .details strong { color: rgb(213, 142, 16); }

/* ---------- Contact form ---------- */
.contact-wrap { display: flex; gap: 30px; }
.contact-wrap form { flex: 1; }
.contact-wrap .info { flex: 1; font-size: 12px; color: rgb(220, 228, 240); }
.contact-wrap table td { padding: 6px 4px; color: rgb(192, 214, 248); }
.contact-wrap input[type=text], .contact-wrap textarea {
	width: 100%;
	padding: 6px;
	border: 1px solid rgb(213, 142, 16);
	border-radius: 3px;
	background: rgb(6, 34, 74);
	color: rgb(248, 248, 248);
}
.contact-wrap input[type=submit] {
	background-color: rgb(213, 142, 16);
	color: rgb(6, 34, 74);
	border: none;
	padding: 10px 25px;
	border-radius: 3px;
	cursor: pointer;
	font-weight: bold;
}
.contact-wrap input[type=submit]:hover { background-color: rgb(253, 123, 30); }

/* ---------- Footer ---------- */
#footer {
	width: 100%;
	box-sizing: border-box;
	color: rgb(192, 214, 248);
	padding-top: 30px;
	margin-top: 15px;
	background-color: rgb(2, 19, 44);
	border-top: 2px solid rgb(213, 142, 16);
}
#footer a { color: rgb(130, 185, 20); text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	padding: 0 25px;
}
#footer-grid .fcol { flex: 1 1 200px; min-width: 180px; }
#footer-grid .fcol h4 {
	color: rgb(213, 142, 16);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 12px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(213,142,16,0.3);
}
#footer-grid .fcol p { font-size: 11.5px; line-height: 1.7; color: rgb(192, 214, 248); margin: 0 0 10px 0; }
#footer-grid .fcol ul { list-style: none; margin: 0; padding: 0; }
#footer-grid .fcol ul li { margin-bottom: 8px; font-size: 11.5px; }
#footer-grid .fcol ul li a:hover { color: rgb(213, 142, 16); }
#footer-social { display: flex; gap: 8px; margin-top: 6px; }
#footer-bottom {
	width: 100%;
	margin-top: 25px;
	padding: 15px 25px;
	border-top: 1px solid rgba(213,142,16,0.25);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: rgb(150, 170, 200);
}
#footer-bottom .pay-badges span {
	display: inline-block;
	background: rgba(213,142,16,0.12);
	border: 1px solid rgba(213,142,16,0.4);
	color: rgb(213, 142, 16);
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 10px;
	margin-left: 6px;
}

.clearfix::after { content: ""; display: table; clear: both; }

/* ============================================================
   Added: WhatsApp / LinkedIn CTAs, service pages, buy-website
   listings, payment/hosting section - premium branding pass
   ============================================================ */

/* Top-bar quick contact icons (header) */
#header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgb(8, 42, 88);
	border: 1px solid rgb(213, 142, 16);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: rgb(213, 142, 16); }
.icon-btn:hover svg path { fill: rgb(6, 34, 74) !important; }

/* Floating WhatsApp button */
#wa-float {
	position: fixed;
	bottom: 22px;
	right: 22px;
	background: #25D366;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.35);
	z-index: 500;
}
#wa-float svg { width: 28px; height: 28px; }
#wa-float:hover { background: #1ebe5b; }

/* Book Now / CTA buttons */
.btn-cta {
	display: inline-block;
	background: rgb(213, 142, 16);
	color: rgb(6, 34, 74) !important;
	font-weight: 700;
	padding: 10px 22px;
	border-radius: 4px;
	text-decoration: none !important;
	margin-top: 10px;
}
.btn-cta:hover { background: rgb(253, 123, 30); }
.btn-cta.wa { background: #25D366; color: #06224A !important; }
.btn-cta.wa:hover { background: #1ebe5b; }
.btn-cta.outline {
	background: transparent;
	border: 1px solid rgb(213, 142, 16);
	color: rgb(213, 142, 16) !important;
}
.btn-cta.outline:hover { background: rgb(213, 142, 16); color: rgb(6, 34, 74) !important; }

/* Trust / stats strip (Search Console screenshots) */
.stats-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin: 15px 0 20px 0;
}
.stats-card {
	background: rgb(6, 34, 74);
	border: 1px solid rgb(213, 142, 16);
	border-radius: 6px;
	padding: 10px;
	text-align: center;
}
.stats-card img { width: 100%; border-radius: 4px; display: block; }
.stats-card p { margin: 8px 0 0 0; font-size: 11px; color: rgb(213, 142, 16); text-align: center; }

/* Profile image blocks */
.profile-photo {
	float: right;
	width: 220px;
	max-width: 40%;
	height: auto;
	border-radius: 6px;
	border: 2px solid rgb(213, 142, 16);
	margin: 0 0 15px 20px;
}
.profile-illustration {
	width: 140px;
	border-radius: 6px;
	display: block;
	margin: 0 auto 10px auto;
}

/* Services hub grid */
.services-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 15px;
}
.service-card {
	background: rgb(6, 34, 74);
	border: 1px solid rgb(213, 142, 16);
	border-radius: 6px;
	padding: 16px;
}
.service-card h3 { color: rgb(248, 248, 248); margin: 0 0 8px 0; font-size: 14px; }
.service-card p { color: rgb(220, 228, 240); font-size: 11.5px; margin-bottom: 10px; }

/* Buy Website listing cards */
.listing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 15px;
}
.listing-card {
	background: rgb(6, 34, 74);
	border: 1px dotted rgb(213, 142, 16);
	border-radius: 6px;
	padding: 16px;
}
.listing-card h3 { color: rgb(213, 142, 16); margin: 0 0 8px 0; font-size: 14px; }
.listing-table { width: 100%; font-size: 11.5px; color: rgb(220, 228, 240); border-collapse: collapse; margin-bottom: 10px; }
.listing-table td { padding: 4px 2px; border-bottom: 1px solid rgba(213,142,16,0.2); }
.listing-table td:first-child { color: rgb(213, 142, 16); font-weight: bold; width: 45%; }
.badge {
	display: inline-block;
	background: rgb(130, 185, 20);
	color: rgb(6, 34, 74);
	font-size: 10px;
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 10px;
	margin-bottom: 8px;
}

/* Payment / hosting page */
.pay-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 15px;
}
.pay-card {
	background: rgb(6, 34, 74);
	border: 1px solid rgb(213, 142, 16);
	border-radius: 6px;
	padding: 16px;
}
.pay-card h3 { color: rgb(248, 248, 248); font-size: 14px; margin-top: 0; }
.pay-card table { width: 100%; font-size: 11.5px; color: rgb(220, 228, 240); }
.pay-card table td { padding: 4px 2px; vertical-align: top; }
.pay-card table td:first-child { color: rgb(213, 142, 16); width: 40%; }
.qr-box { text-align: center; }
.qr-box img { width: 160px; border-radius: 6px; border: 1px solid rgb(213, 142, 16); margin-bottom: 8px; }
.note-box {
	background: rgba(213,142,16,0.1);
	border-left: 3px solid rgb(213, 142, 16);
	padding: 10px 12px;
	font-size: 11.5px;
	color: rgb(220, 228, 240);
	margin-top: 10px;
	border-radius: 3px;
}

/* ============================================================
   Package icons + premium tier styling
   ============================================================ */
.pkg-icon {
	width: 30px;
	height: 30px;
	margin-right: 8px;
	flex-shrink: 0;
}
.pkg-head { position: relative; }
.pkg.premium .pkg-head {
	background: linear-gradient(rgb(213, 142, 16), rgb(150, 95, 8));
}
.pkg.premium .pkg-head h2 { color: rgb(6, 34, 74); font-weight: 700; }
.pkg.premium .pkg-body { border: 1px solid rgb(213, 142, 16); border-top: none; }
.pkg-badge {
	position: absolute;
	top: -10px;
	right: 8px;
	background: rgb(253, 123, 30);
	color: #fff;
	font-size: 9px;
	font-weight: bold;
	padding: 3px 8px;
	border-radius: 8px;
	letter-spacing: 0.4px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ============================================================
   Portfolio - recent projects + linked homepage thumbnails
   ============================================================ */
.recent-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 15px 0 25px 0;
}
.recent-card {
	display: block;
	border: 1px solid rgb(213, 142, 16);
	border-radius: 6px;
	overflow: hidden;
	background: rgb(6, 34, 74);
	text-decoration: none;
}
.recent-card .thumb-img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	display: block;
	background: rgb(8, 42, 88);
}
.recent-card .thumb-placeholder {
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgb(20,65,120), rgb(8,35,72));
	color: rgb(213, 142, 16);
	font-size: 10px;
	text-align: center;
	padding: 4px;
}
.recent-card .label {
	display: block;
	padding: 6px 8px;
	font-size: 10px;
	color: rgb(220, 228, 240);
	text-align: center;
}
.recent-card:hover { border-color: rgb(253, 123, 30); }

.portfolio-item .thumb-img {
	width: 30%;
	height: 90px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
}
.portfolio-item a.visit-link {
	display: inline-block;
	margin-top: 6px;
	color: rgb(130, 185, 20);
	font-size: 10.5px;
}

/* ============================================================
   Carousel (for Pinterest account listings)
   ============================================================ */
.carousel {
	position: relative;
	width: 100%;
	height: 160px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
	border-radius: 6px;
	border: 1px solid rgb(213, 142, 16);
	margin-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}
.carousel-slide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 160px;
	scroll-snap-align: start;
	background: linear-gradient(135deg, rgb(20,65,120), rgb(8,35,72));
	color: rgb(213, 142, 16);
	font-size: 12px;
	text-align: center;
	white-space: normal;
	padding: 10px;
	box-sizing: border-box;
}
.carousel-slide img { max-width: 100%; max-height: 160px; object-fit: cover; }
.carousel-hint { font-size: 10px; color: rgb(150,170,200); text-align: center; margin-top: -6px; margin-bottom: 12px; }

/* ============================================================
   RESPONSIVE - global safety net + breakpoints
   ============================================================ */
img { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ---- Tablet (<= 900px) ---- */
@media (max-width: 900px) {
	.services-grid, .listing-grid, .pay-grid, .stats-strip { grid-template-columns: 1fr 1fr; }
	.recent-grid { grid-template-columns: repeat(3, 1fr); }
	#nav_menu ul li a { padding: 10px 14px; font-size: 11.5px; }
	#header-character { height: 110px; max-width: 170px; }
}

/* ---- Nav collapses to hamburger + everything stacks (<= 780px) ---- */
@media (max-width: 780px) {
	.nav-toggle-label { display: block; }
	#nav_wrap { display: none; padding: 0; }
	.nav-toggle:checked ~ #nav_wrap { display: block; }
	#nav_menu ul { flex-direction: column; }
	#nav_menu ul li { display: block; width: 100%; }
	#nav_menu ul li a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		border-right: none;
		border-bottom: 1px solid rgba(0,0,0,0.08);
		text-align: left;
		padding: 12px 20px;
	}
	.dropmenudiv {
		display: block;
		position: static;
		width: 100%;
		border: none;
		box-shadow: none;
		background: rgb(248, 249, 250);
	}
	#nav_menu ul li .dropmenudiv {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}
	#nav_menu ul li:hover .dropmenudiv,
	#nav_menu ul li:focus-within .dropmenudiv {
		max-height: 500px;
	}
	.dropmenudiv a { padding: 10px 32px; }
}

/* ---- Small tablet / large phone (<= 700px) ---- */
@media (max-width: 700px) {
	.portfolio-grid { grid-template-columns: 1fr; }
	.recent-grid { grid-template-columns: repeat(2, 1fr); }
	.contact-wrap { flex-direction: column; gap: 20px; }
	#footer-grid { padding: 0 20px; }
}

/* ---- Mobile (<= 600px) ---- */
@media (max-width: 600px) {
	body { font-size: 12px; }

	#header-topbar { justify-content: center; text-align: center; padding: 10px 14px; }
	#header-main { justify-content: center; text-align: center; padding: 14px 14px 0 14px; }
	#header-brand { align-items: center; padding-bottom: 10px; max-width: 100%; }
	#header-character { height: 90px; max-width: 120px; margin: 0 auto; }
	#logo { font-size: 18px; }

	#body_row { flex-direction: column; padding: 8px 10px; }
	.pkg { flex: 1 1 100%; }
	.content-col, .content-col-full { padding: 8px 10px; }
	.content-box { padding: 12px; }

	.services-grid, .listing-grid, .pay-grid, .stats-strip { grid-template-columns: 1fr; }
	.recent-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

	.profile-photo { float: none; display: block; width: 70%; max-width: 220px; margin: 0 auto 15px auto; }

	#footer-grid { flex-direction: column; gap: 22px; }
	#footer-grid .fcol { width: 100%; }
	#footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

	#wa-float { width: 48px; height: 48px; bottom: 14px; right: 14px; }
	#wa-float svg { width: 24px; height: 24px; }

	.pkg-order { text-align: center; }
	.portfolio-item { flex-direction: column; }
	.portfolio-item .thumb, .portfolio-item .thumb-img { width: 100%; }
}

/* ---- Very small phones (<= 380px) ---- */
@media (max-width: 380px) {
	.recent-grid { grid-template-columns: repeat(2, 1fr); }
	#logo { font-size: 16px; }
	#header-character { height: 75px; max-width: 95px; }
}