/* =====================================================================
   Site stylesheet – complements the original Archee / Elementor CSS.
   (Replaces the Elementor per-page CSS and the Visual Portfolio JS layout)
   ===================================================================== */

/* ---------- Elementor kit (global settings of the original site) ---------- */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1230px; }
.elementor-widget:not(:last-child) { margin-block-end: 0; margin-bottom: 0; }
.elementor-element { --widgets-spacing: 0px 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; }
@media (max-width: 1024px) { .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1024px; } }
@media (max-width: 767px) { .elementor-section.elementor-section-boxed > .elementor-container { max-width: 767px; } }

.has-vertical-lines .vlt-vertical-lines { z-index: -1; }
.sec-pad { padding: 6.25rem 0 7.5rem; }
.vlt-spacer { height: 1.5rem; }

/* ---------- Visual Portfolio layouts (CSS grid instead of isotope) ---------- */
.vp-portfolio .vp-portfolio__preloader-wrap { display: none; }
.vp-portfolio .vp-portfolio__items-wrap,
.vp-portfolio .vp-portfolio__layout-elements { opacity: 1; visibility: visible; }
.vp-portfolio[data-vp-layout] .vp-portfolio__items {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	column-gap: var(--vp-items__gap);
	row-gap: var(--vp-items__gap-vertical, var(--vp-items__gap));
	grid-auto-flow: row dense;
	margin: 0 !important;
}
.vp-portfolio[data-vp-layout] .vp-portfolio__item-wrap { width: auto !important; float: none !important; position: relative; }
.vp-portfolio[data-vp-layout] .vp-portfolio__item-wrap .vp-portfolio__item { margin: 0 !important; }
.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__item-wrap .vp-portfolio__item-img-wrap { margin: 0 !important; }
.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__item-img { left: 0 !important; top: 0 !important; }
.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__item-img-wrap:before { padding-top: 100%; }
.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__item,
.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__item-img-wrap { height: 100%; }
.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__item-wrap:nth-child(10n+3),
.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__item-wrap:nth-child(10n+6) { grid-column: span 2; grid-row: span 2; }
.vp-portfolio[data-vp-layout=grid] .vp-portfolio__item-img-wrap:before { padding-top: var(--ratio, 100%); }
.vp-portfolio[data-vp-layout=grid] .vp-portfolio__items { align-items: start; }
.vp-portfolio .vp-portfolio__item-img img { width: 100%; }
.vp-portfolio .vp-portfolio__item-wrap { transition: opacity .4s; }

@media (max-width: 991px) {
	.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vp-portfolio[data-vp-layout=tiles] .vp-portfolio__item-wrap:nth-child(n) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 768px) {
	.vp-portfolio[data-vp-layout] .vp-portfolio__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vp-portfolio.vp-strip .vp-portfolio__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
	.vp-portfolio[data-vp-layout] .vp-portfolio__items { grid-template-columns: minmax(0, 1fr); }
	.vp-portfolio.vp-strip .vp-portfolio__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* image strip (was the "instagram" grid) */
.site-strip { background-color: #090909; }
.vp-strip .vp-portfolio__items { grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); }
.vp-strip .vp-portfolio__item-img-wrap:before { padding-top: 100% !important; }
.vp-strip .vp-portfolio__items-wrap { margin: 0; }
.vp-strip .vp-strip__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; color: #fff; font-family: "Oswald", sans-serif; font-size: 14px; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
@media (max-width: 767px) { .vp-strip .vp-strip__title { font-size: 11px; padding: 8px; } }
.vp-portfolio .vp-portfolio__items-wrap { margin-bottom: 0; }
.vp-pagination__load-more .vp-pagination__load-more-loading,
.vp-pagination__load-more .vp-pagination__load-more-no-more { display: none; }
.vp-pagination__load-more.is-loading .vp-pagination__load-more-load { display: none; }
.vp-pagination__load-more.is-loading .vp-pagination__load-more-loading { display: inline; }
.vp-pagination__load-more.is-loading .fa-loader { animation: site-spin 1s linear infinite; }
@keyframes site-spin { to { transform: rotate(360deg); } }

/* ---------- About ---------- */
.sec-about { padding: 6.25rem 0 7.5rem; }
.about-heading--first > .elementor-widget-container { margin-top: 20px; }
.about-list--gap > .elementor-widget-container { margin-bottom: 40px; }
.page-about .vlt-styled-list li { font-weight: 400; }
.about-video { margin-top: 72px; }
.about-video .ratio iframe { width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) {
	.elementor-column.about-col-text { width: 45%; }
	.elementor-column.about-col-gap { width: 10%; }
	.elementor-column.about-col-image { width: 44.332%; }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-column.about-col-text, .elementor-column.about-col-image { width: 100%; }
}
@media (max-width: 1024px) {
	.elementor-column.about-col-text > .elementor-element-populated { margin: 3rem 0 0; }
}

/* ---------- Single project ---------- */
.sec-gallery { padding: 6.25rem 0 0; }
.sec-recent { padding: 7.5rem 0; }
.sec-recent .vlt-heading { text-align: center; }
.project-description { width: 90%; max-width: 90%; }
@media (min-width: 768px) {
	.elementor-column.project-col-main { width: 74.64%; }
	.elementor-column.project-col-meta { width: 25%; }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-column.project-col-main, .elementor-column.project-col-meta { width: 100%; }
}
@media (max-width: 1024px) {
	.project-description { width: 100%; max-width: 100%; }
	.elementor-column.project-col-meta > .elementor-element-populated { margin: 3rem 0 0; }
}
.vlt-justified-gallery .vlt-simple-image img { width: 100%; }

/* ---------- Contact ---------- */
.contact-map iframe { width: 100%; height: 35.625rem; border: 0; display: block; filter: saturate(0%); }
.sec-contact { padding: 7.5rem 0; }
.sec-contact > .elementor-container > .elementor-column:first-child > .elementor-element-populated { margin: 0 0 0 6.25rem; }
.sec-contact > .elementor-container > .elementor-column:last-child > .elementor-element-populated { margin: 0 6.25rem 0 0; }
.contact-title .vlt-section-title__description { font-size: .9375rem; }
@media (max-width: 1024px) {
	.sec-contact > .elementor-container > .elementor-column > .elementor-element-populated { margin: 0 !important; }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.sec-contact > .elementor-container > .elementor-column { width: 50%; }
}
@media (max-width: 767px) {
	.sec-contact > .elementor-container > .elementor-column:last-child > .elementor-element-populated { margin: 6.25rem 0 0 !important; }
}
.site-form-response { margin-top: 1.5rem; font-size: .875rem; }
.site-form-response.is-success { color: #2e7d32; }
.site-form-response.is-error { color: #c62828; }
.site-field-error { display: block; color: #c62828; font-size: .8125rem; margin-top: .35rem; }
.vlt-form-control.is-invalid { box-shadow: inset 0 0 0 1px #c62828; }

/* ---------- Blog ---------- */
.page-blog .vlt-page-title--blog-hero { text-align: center; }
.page-blog .vlt-page-title--blog-hero .vlt-page-title__title { font-size: 5rem; }
.page-blog .sec-pad { padding: 3.75rem 0 7.5rem; }
.vp-blog .vp-portfolio__item-img-wrap { display: block; overflow: hidden; position: relative; }
.vp-blog .vp-portfolio__item-img-wrap:before { content: ""; display: block; padding-top: 75%; }
.vp-blog .vp-portfolio__item-img,
.vp-blog .vp-portfolio__item-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-filter__item-count { font-size: .625rem; vertical-align: super; }

/* post content */
.vlt-content-markup figure { margin: 4rem 0; }
.vlt-content-markup figure img, .vlt-content-markup img { max-width: 100%; height: auto; }
.vlt-content-markup h1, .vlt-content-markup h2, .vlt-content-markup h3,
.vlt-content-markup h4, .vlt-content-markup h5, .vlt-content-markup h6 { margin: 0 0 2rem; }
.vlt-content-markup blockquote { margin: 2.5rem 0; }
.vlt-content-markup iframe { max-width: 100%; }
.vlt-related-row .vlt-post { margin: 0; }

/* search */
.site-search-result { display: flex; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--vlt-border-color, #eee); }
.site-search-result__img img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; }
.site-search-result__type { font-size: .75rem; opacity: .6; }
.site-404 { padding: 10rem 0; }
.site-404__code { font-size: 10rem; line-height: 1; margin-bottom: 1rem; }

/* ---------- Footer (was Elementor template "Footer Modern") ---------- */
.site-footer-section { overflow: hidden; color: #F5F5EB; padding: 6.25rem 0; background-position: top left; background-repeat: repeat; }
.site-footer-section a, .site-footer-section a:hover { color: #F5F5EB; }
.footer-heading { width: 440px; max-width: 440px; }
.footer-heading .vlt-heading, .footer-col-title .vlt-heading { color: #FFFFFF; }
.footer-brand > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content: center; align-items: center; }
.footer-brand .elementor-widget-wrap > .elementor-element.footer-logo,
.footer-brand .elementor-widget-wrap > .elementor-element.footer-copy { width: auto; max-width: none; }
.footer-logo { align-self: flex-start; text-align: left; }
.footer-logo > .elementor-widget-container { margin: 0 2rem 0 0; }
.footer-logo img { height: 100px; width: auto; }
.footer-copy { width: auto; max-width: none; color: #999999; }
.footer-copy > .elementor-widget-container { padding: 1.5rem 0; }
.footer-text { color: #CECECE; }
.footer-text a, .footer-text a:hover { color: #CECECE; }
.footer-socials .vlt-social-icon,
.footer-socials .vlt-social-icon:hover { color: #090909; background-color: #FFFFFF; }
@media (min-width: 768px) {
	.elementor-column.footer-col-1 { width: 50%; }
	.elementor-column.footer-col-2 { width: 25%; }
	.elementor-column.footer-col-3 { width: 24.332%; }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-column.footer-col-1 { width: 100%; }
	.elementor-column.footer-col-2, .elementor-column.footer-col-3 { width: 50%; }
}
@media (max-width: 1024px) {
	.elementor-column.footer-col-2 > .elementor-element-populated,
	.elementor-column.footer-col-3 > .elementor-element-populated { margin: 3rem 0 0; }
}
@media (max-width: 767px) {
	.elementor-column.footer-col-1 > .elementor-element-populated { margin: 3rem 0 0; }
	.footer-heading { width: 100%; max-width: 100%; }
}

/* ---------- Case-study project pages (migrated from the old farhanlatif.net) ---------- */
.sec-project-intro { padding: 6.25rem 0 4.375rem; }
.sec-blocks { padding: 0 0 7.5rem; }
.project-block + .project-block { margin-top: 30px; }
.project-text p { margin-bottom: 1.25rem; }
.project-text p:last-child { margin-bottom: 0; }
.project-text strong { font-family: var(--vlt-primary-font); font-weight: 500; letter-spacing: .02em; color: var(--vlt-color-heading, #101010); }
.project-text h6 { margin: 1.75rem 0 .5rem; }
.project-text h6:first-child { margin-top: 0; }
.project-text a { text-decoration: underline; text-underline-offset: 3px; }
.site-full-image .vlt-simple-image img { width: 100%; height: auto; display: block; }
.site-grid { display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.site-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-grid--shorts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-grid .vlt-simple-image img { width: 100%; height: auto; display: block; }
.site-masonry { column-count: 3; column-gap: 30px; }
.site-masonry .vlt-simple-image { break-inside: avoid; margin-bottom: 30px; }
.site-masonry img { width: 100%; height: auto; display: block; }
.site-video { position: relative; background: #0a0a0a; overflow: hidden; border-radius: var(--vlt-border-radius, 1px); }
.site-video video { width: 100%; height: auto; display: block; }
.site-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ratio-9x16 { --bs-aspect-ratio: 177.78%; }
.site-video--yt { cursor: pointer; }
.site-video--yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s, opacity .3s; }
.site-video--yt:hover img { transform: scale(1.03); opacity: .85; }
.site-video__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 0; background: #fff; color: #0a0a0a; font-size: 20px; display: grid; place-items: center; cursor: pointer; transition: transform .3s; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.site-video--yt:hover .site-video__play { transform: scale(1.08); }
.site-slider { position: relative; overflow: hidden; }
.site-slider .swiper-slide img { width: 100%; height: auto; display: block; }
.site-slider__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.25rem; font-family: var(--vlt-primary-font); }
.site-slider__nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); background: #fff; cursor: pointer; transition: all .3s; }
.site-slider__nav button:hover { background: #0a0a0a; color: #fff; }
.site-slider__nav .swiper-button-disabled { opacity: .35; pointer-events: none; }
@media (max-width: 991px) {
	.site-grid--4, .site-grid--shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-masonry { column-count: 2; }
	.sec-project-intro { padding-top: 4rem; }
}
@media (max-width: 575px) {
	.site-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.site-grid--shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.site-masonry { column-count: 1; }
	.project-block + .project-block { margin-top: 20px; }
}

/* category buttons above the Work / Portfolio grid */
.site-cat-filter { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; margin: 0 auto 4.375rem; padding: 0 1rem; }
.site-cat-filter a { position: relative; display: inline-block; padding-bottom: .5rem; font-family: var(--vlt-primary-font), sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; text-transform: uppercase; color: #0f0f0f; opacity: .45; transition: opacity .25s; }
.site-cat-filter a:hover, .site-cat-filter a.is-active { opacity: 1; }
.site-cat-filter a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1.25rem; height: 2px; margin-left: -.625rem; background: currentColor; transform: scaleX(0); transition: transform .25s; }
.site-cat-filter a.is-active::after { transform: scaleX(1); }
.site-cat-filter sup { margin-left: .2rem; font-family: var(--vlt-secondary-font), sans-serif; font-size: .625rem; font-weight: 500; vertical-align: super; }
.page-work .site-cat-filter { margin-top: -2.5rem; }
@media (max-width: 767px) { .site-cat-filter { gap: .5rem 1.25rem; margin-bottom: 2.5rem; } .site-cat-filter a { font-size: .875rem; } .page-work .site-cat-filter { margin-top: 0; } }