/* =========================================================
   HOMEPAGE REFINEMENTS
   Scoped to the homepage via body[data-page="home"].
   Loaded last so it wins over the responsive stylesheets.
   Goal: equal vertical rhythm between every section.
========================================================= */

/* -----------------------------------------------------
   Equal section spacing
   Base (desktop) rhythm = 120px top / 120px bottom.
   The portfolio and blog sections shipped with smaller
   bottoms (80/90), which broke the rhythm — normalize them
   at every breakpoint to match the other sections.
----------------------------------------------------- */
body[data-page="home"] .portfolio-section,
body[data-page="home"] .blog-section {
	padding-top: 120px;
	padding-bottom: 120px;
}

/* Small desktop / large tablet */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	body[data-page="home"] .portfolio-section,
	body[data-page="home"] .blog-section {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	body[data-page="home"] .portfolio-section,
	body[data-page="home"] .blog-section {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

/* Mobile */
@media only screen and (max-width: 767px) {
	body[data-page="home"] .portfolio-section,
	body[data-page="home"] .blog-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

/* -----------------------------------------------------
   Blog "Coming Soon" placeholder — give it breathing room
   so the section isn't a thin awkward strip.
----------------------------------------------------- */
body[data-page="home"] .blog-section .col-lg-12 h3 {
	margin-top: 10px;
	padding: 20px 0 10px;
	opacity: .85;
}

/* -----------------------------------------------------
   Speciality popup — comfortable padding for the new
   single-column layout and a little space above the CTA.
----------------------------------------------------- */
.popup_content_area .service_info .btn {
	margin-top: 26px;
}

@media only screen and (max-width: 575px) {
	.popup_content_area .service_details_content {
		padding: 0;
	}
	.popup_content_area .service_info .title {
		font-size: 26px;
	}
}

/* -----------------------------------------------------
   Skill icons that use a Font Awesome glyph instead of an
   SVG (Shopify, AI, HTML5) — match the SVG icons' size and
   colour so the grid stays visually consistent.
----------------------------------------------------- */
body[data-page="home"] .skills-widget .skill-item .icon-box {
	height: 62px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

body[data-page="home"] .skills-widget .skill-item .icon-box i {
	font-size: 46px;
	line-height: 1;
	color: var(--tj-theme-primary);
	-webkit-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
}

body[data-page="home"] .skills-widget .skill-item:hover .icon-box i {
	color: #ffffff;
}

/* =========================================================
   NEW SECTIONS: Process, FAQ, CTA
   Dark by default; .light-mode overrides for the light theme.
========================================================= */

/* ---- Section spacing (match the site's 120/100/80/60 rhythm) ---- */
.hs-process-section,
.hs-faq-section {
	padding-top: 120px;
	padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.hs-process-section,
	.hs-faq-section { padding-top: 100px; padding-bottom: 100px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.hs-process-section,
	.hs-faq-section { padding-top: 80px; padding-bottom: 80px; }
}
@media only screen and (max-width: 767px) {
	.hs-process-section,
	.hs-faq-section { padding-top: 60px; padding-bottom: 60px; }
}

/* ---------------- PROCESS ---------------- */
.hs-process-row > [class*="col-"] {
	margin-top: 24px;
}
.hs-process-card {
	position: relative;
	height: 100%;
	padding: 34px 22px 26px;
	border-radius: 20px;
	background: var(--tj-theme-accent-2);
	border: 1px solid rgba(135, 80, 247, .16);
	text-align: center;
	overflow: hidden;
	-webkit-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.hs-process-card:hover {
	-webkit-transform: translateY(-6px);
	-ms-transform: translateY(-6px);
	transform: translateY(-6px);
	border-color: rgba(135, 80, 247, .55);
}
.hs-process-num {
	position: absolute;
	top: 10px;
	right: 18px;
	font-family: var(--tj-ff-russo, "Russo One", sans-serif);
	font-size: 46px;
	line-height: 1;
	color: rgba(255, 255, 255, .06);
}
.hs-process-icon {
	width: 66px;
	height: 66px;
	margin: 0 auto 20px;
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: rgba(135, 80, 247, .12);
	color: var(--tj-theme-primary-2, #9b8dff);
	font-size: 26px;
	-webkit-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.hs-process-card:hover .hs-process-icon {
	background: var(--tj-theme-primary);
	color: #fff;
}
.hs-process-title {
	font-size: 20px;
	margin: 0 0 10px;
	color: #fff;
}
.hs-process-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--tj-body);
}

.light-mode .hs-process-card {
	background: var(--tj-white);
	border-color: rgba(135, 80, 247, .16);
	-webkit-box-shadow: 0 12px 34px rgba(87, 50, 150, .07);
	box-shadow: 0 12px 34px rgba(87, 50, 150, .07);
}
.light-mode .hs-process-num { color: rgba(135, 80, 247, .1); }
.light-mode .hs-process-title { color: #14082a; }
.light-mode .hs-process-card p { color: #5c6266; }

/* ---------------- FAQ ---------------- */
.hs-faq-item {
	background: var(--tj-theme-accent-2);
	border: 1px solid rgba(135, 80, 247, .16);
	border-radius: 14px;
	margin-bottom: 14px;
	overflow: hidden;
}
.hs-faq-item summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 18px 52px 18px 22px;
	font-family: var(--tj-ff-heading, "Sora", sans-serif);
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	-webkit-transition: color .25s ease;
	-o-transition: color .25s ease;
	transition: color .25s ease;
}
.hs-faq-item summary::-webkit-details-marker { display: none; }
.hs-faq-item summary:hover { color: var(--tj-theme-primary-2, #9b8dff); }
.hs-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: var(--tj-theme-primary-2, #9b8dff);
	-webkit-transition: -webkit-transform .3s ease;
	transition: transform .3s ease;
}
.hs-faq-item[open] summary::after {
	-webkit-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
}
.hs-faq-body {
	padding: 0 22px 20px;
}
.hs-faq-body p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--tj-body);
}
.hs-faq-item[open] .hs-faq-body {
	-webkit-animation: hs-faq-in .3s ease;
	animation: hs-faq-in .3s ease;
}
@keyframes hs-faq-in {
	from { opacity: 0; -webkit-transform: translateY(-6px); transform: translateY(-6px); }
	to   { opacity: 1; -webkit-transform: none; transform: none; }
}

.light-mode .hs-faq-item {
	background: var(--tj-white);
	border-color: rgba(135, 80, 247, .18);
}
.light-mode .hs-faq-item summary { color: #14082a; }
.light-mode .hs-faq-body p { color: #5c6266; }

/* ---------------- CTA ---------------- */
.hs-cta-section {
	padding: 0 0 120px;
}
@media only screen and (max-width: 991px) { .hs-cta-section { padding-bottom: 80px; } }
@media only screen and (max-width: 767px) { .hs-cta-section { padding-bottom: 60px; } }

.hs-cta-inner {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	padding: 44px 48px;
	background: var(--tj-theme-accent-2);
	border: 1px solid rgba(135, 80, 247, .3);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 24px 30px;
}
.hs-cta-inner::before {
	content: "";
	position: absolute;
	right: -70px;
	top: -70px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(135, 80, 247, .38), transparent 70%);
	pointer-events: none;
}
.hs-cta-text {
	position: relative;
	z-index: 1;
}
.hs-cta-text h2 {
	margin: 0 0 8px;
	font-size: 30px;
	color: #fff;
}
.hs-cta-text p {
	margin: 0;
	max-width: 540px;
	color: var(--tj-body);
}
.hs-cta-inner .btn {
	position: relative;
	z-index: 1;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}
.light-mode .hs-cta-inner {
	background: var(--tj-off-white);
	border-color: rgba(135, 80, 247, .25);
}
.light-mode .hs-cta-text h2 { color: #14082a; }
.light-mode .hs-cta-text p { color: #5c6266; }

@media only screen and (max-width: 767px) {
	.hs-cta-inner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		text-align: center;
		padding: 32px 22px;
	}
	.hs-cta-text p { margin-left: auto; margin-right: auto; }
	.hs-cta-text h2 { font-size: 24px; }
	.hs-process-card { padding: 26px 14px 22px; }
	.hs-process-icon { width: 56px; height: 56px; font-size: 22px; }
	.hs-process-title { font-size: 17px; }
}

/* =========================================================
   LATEST VLOG — lite YouTube embed (homepage Blog section)
   Facade thumbnail; the player loads only on click.
========================================================= */
.vlog-card {
	max-width: 1000px;
	margin: 0 auto;
}
.vlog-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid rgba(135, 80, 247, .3);
	-webkit-box-shadow: 0 16px 44px rgba(135, 80, 247, .22);
	box-shadow: 0 16px 44px rgba(135, 80, 247, .22);
}
.vlog-embed .vlog-thumb {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
	-webkit-transition: -webkit-transform .5s cubic-bezier(.16, 1, .3, 1);
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.vlog-embed:hover .vlog-thumb {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
.vlog-embed::after {
	content: "";
	position: absolute;
	inset: 0;
	background: -o-linear-gradient(bottom, rgba(9, 5, 16, .5) 0%, rgba(9, 5, 16, .05) 60%, transparent 100%);
	background: linear-gradient(to top, rgba(9, 5, 16, .5) 0%, rgba(9, 5, 16, .05) 60%, transparent 100%);
	pointer-events: none;
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}
.vlog-play {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: var(--tj-theme-primary);
	color: #ffffff;
	font-size: 26px;
	-webkit-box-shadow: 0 10px 34px rgba(135, 80, 247, .6);
	box-shadow: 0 10px 34px rgba(135, 80, 247, .6);
	-webkit-transition: -webkit-transform .3s ease;
	transition: transform .3s ease, background .3s ease;
}
.vlog-play i { margin-left: 4px; }
.vlog-embed:hover .vlog-play {
	-webkit-transform: translate(-50%, -50%) scale(1.1);
	-ms-transform: translate(-50%, -50%) scale(1.1);
	transform: translate(-50%, -50%) scale(1.1);
}
.vlog-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.vlog-meta {
	text-align: center;
	margin-top: 22px;
}
.vlog-title {
	margin: 0 0 8px;
	font-size: 22px;
	color: #ffffff;
}
.vlog-desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tj-body);
}
.light-mode .vlog-title { color: #14082a; }
.light-mode .vlog-desc { color: #5c6266; }

@media only screen and (max-width: 575px) {
	.vlog-play { width: 60px; height: 60px; font-size: 20px; }
	.vlog-title { font-size: 19px; }
}

/* Hide GitHub icon in the hero socials on mobile (prevents overflow) */
@media only screen and (max-width: 767px) {
	.social-icons .hs-hide-mobile { display: none !important; }
}