/* Industries landing page (/industries/) — page-specific layout.
   Brand: navy #170D3D, teal #0AA3D6, purple #3A0CA3, text #5A5A72. Fonts: Heebo/Montserrat.
   Section chrome is shared from service-sections.css (svc-hero, cards, process, faq…);
   this file only holds Industries-specific tweaks, added per section as the page is built. */

/* Ensure the Elementor content stretches full-width with no Astra page padding
   (the sections manage their own inner max-width, exactly like the service pages). */
.saiftec-industries .site-content .ast-container,
.saiftec-industries #primary{padding-left:0;padding-right:0;max-width:100%;}
.saiftec-industries #primary{margin:0;}

/* ============================ IND – 00 Hero ============================ */
/* Reuses .svc-hero from service-sections.css verbatim (navy + diagonal overlay,
   breadcrumb, H1, subhead, 2×2 bullets, CTA, right media). No overrides needed. */

/* ============================ Section intro (shared) ============================ */
/* Eyebrow + heading + intro block used at the top of every Industries section. */
.ind-eyebrow .elementor-heading-title,
.ind-grid__eyebrow .elementor-heading-title{
	display:inline-block;margin:0 0 12px;
	font-family:"Montserrat",sans-serif;font-weight:700;font-size:13px;letter-spacing:1.5px;
	text-transform:uppercase;color:#3A0CA3;
}
.ind-heading .elementor-heading-title,
.ind-grid__heading .elementor-heading-title{
	margin:0 auto;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:34px;line-height:1.2;color:#170D3D;
}
.ind-intro,.ind-intro p,
.ind-grid__intro,.ind-grid__intro p{
	margin:14px auto 0;max-width:640px;
	font-size:16px;line-height:1.65;color:#5A5A72;
}

/* ============================ IND – 01 Industries grid ============================ */
.ind-no-grid .ind-grid{display:none;}
.ind-grid{background:#ffffff;}
.ind-grid .ind-grid__inner{max-width:1200px;margin:0 auto;padding:88px 24px;}
.ind-grid .ind-grid__head{text-align:center;margin-bottom:48px;}

/* Loop Grid → cards. 5 across (reference), collapsing responsively. */
.ind-grid .elementor-grid{
	grid-template-columns:repeat(5,1fr);gap:24px;
}
@media (max-width:1200px){.ind-grid .elementor-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:781px){.ind-grid .elementor-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.ind-grid .elementor-grid{grid-template-columns:1fr;}}

/* Card */
.ind-card{
	display:flex;flex-direction:column;align-items:flex-start;height:100%;
	background:#ffffff;border:1px solid #ECECF3;border-radius:14px;padding:26px 24px;
	transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.e-loop-item:hover .ind-card,.ind-card:hover{
	border-color:#3A0CA3;transform:translateY(-4px);
	box-shadow:0 18px 40px -18px rgba(58,12,163,.28);
}
.ind-card__icon{margin-bottom:16px;}
.ind-card__icon :is(img,svg){width:44px;height:44px;object-fit:contain;display:block;}
.ind-card__title .elementor-heading-title{
	margin:0 0 8px;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:18px;line-height:1.3;color:#170D3D;
}
.ind-card__desc,.ind-card__desc p{
	margin:0;font-size:14px;line-height:1.6;color:#5A5A72;
}
.ind-card__link{margin-top:auto;padding-top:18px;}
.ind-card__link .elementor-button{
	background:transparent;padding:0;border:0;
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;
	color:#3A0CA3;display:inline-flex;align-items:center;gap:7px;
	transition:gap .2s ease,color .2s ease;
}
.ind-card__link .elementor-button:hover{gap:11px;color:#170D3D;}
.ind-card__link .elementor-button::after{
	content:"";width:15px;height:15px;flex:0 0 auto;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0CA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-size:contain;background-repeat:no-repeat;transition:transform .2s ease;
}
.ind-card__link .elementor-button:hover::after{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23170D3D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
@media (max-width:1024px){
	.ind-grid .ind-grid__inner{padding:64px 20px;}
	.ind-grid__heading .elementor-heading-title{font-size:28px;}
}

/* ============================ IND – 02 Industry Challenges (dark band) ============================ */
.ind-no-challenges .ind-challenges{display:none;}
.ind-challenges{position:relative;background:#170D3D;overflow:hidden;}
.ind-challenges::before{
	content:"";position:absolute;inset:0;pointer-events:none;
	background-image:url("/wp-content/uploads/2026/02/digital-marketing-agency-hero-img-bg-overlay-2.svg");
	background-size:cover;background-position:center;opacity:.10;
}
.ind-challenges .ind-challenges__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:84px 24px;}
.ind-challenges .ind-challenges__head{text-align:center;margin-bottom:44px;}
/* Dark-band recolour of the shared section head */
.ind-challenges .ind-eyebrow .elementor-heading-title{color:#0AA3D6;}
.ind-challenges .ind-heading .elementor-heading-title{color:#ffffff;}
.ind-challenges .ind-intro,.ind-challenges .ind-intro p{color:rgba(255,255,255,.72);}

/* Feature List → 5-up light cards on the navy section. Scoped to .ind-challenges: the same
   .svc1-featlist__item class is used by 58 documents, so an unscoped change would recolour every
   feature-list card on the site. */
.ind-challenges .svc1-featlist{grid-template-columns:repeat(5,1fr);gap:16px;margin-top:0;}
.ind-challenges .svc1-featlist__item{
	background:#edefff;border:1px solid rgba(23,13,61,.10);
	border-radius:14px;box-shadow:none;padding:24px 20px;gap:12px;
	transition:border-color .2s ease,background .2s ease;
}
.ind-challenges .svc1-featlist__item:hover{border-color:rgba(10,163,214,.55);background:#f5f6ff;}
.ind-challenges .svc1-featlist__icon{width:46px;height:46px;border-radius:11px;background:rgba(10,163,214,.14);}
/* The icons are inlined SVGs using stroke="currentColor", so they take the card's colour. Teal to match
   the two other card types that pair an icon with a tinted tile (service-category and industry-term
   cards both compute to #0AA3D6); the borderless outcomes cards inherit body ink instead. */
.ind-challenges .svc1-featlist__item{color:#0AA3D6;}
.ind-challenges .svc1-featlist__icon :is(img,svg){width:26px;height:26px;}
/* Site type system: #170D3D for headings, #5A5A72 for body, as every other light card computes to. */
.ind-challenges .svc1-featlist__title{color:#170D3D;font-size:16px;line-height:1.35;}
.ind-challenges .svc1-featlist__text{color:#5A5A72;font-size:14px;line-height:1.6;}
@media (max-width:1100px){.ind-challenges .svc1-featlist{grid-template-columns:repeat(3,1fr);}}
@media (max-width:781px){.ind-challenges .svc1-featlist{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.ind-challenges .svc1-featlist{grid-template-columns:1fr;}
	.ind-challenges .ind-challenges__inner{padding:60px 20px;}}

/* ============================ IND – 03 How Saiftec Helps (outcomes) ============================ */
.ind-no-outcomes .ind-outcomes{display:none;}
.ind-outcomes{background:#F7F8FC;}
.ind-outcomes .ind-outcomes__inner{max-width:1200px;margin:0 auto;padding:84px 24px;}
.ind-outcomes .ind-outcomes__head{text-align:center;margin-bottom:48px;}

/* Feature List → 6-up borderless columns with circular icons */
.ind-outcomes .svc1-featlist{grid-template-columns:repeat(6,1fr);gap:20px;margin-top:0;}
.ind-outcomes .svc1-featlist__item{
	background:transparent;border:0;box-shadow:none;padding:0 6px;gap:12px;text-align:left;
}
.ind-outcomes .svc1-featlist__icon{
	width:56px;height:56px;border-radius:50%;
	background:rgba(58,12,163,.08);
}
.ind-outcomes .svc1-featlist__icon :is(img,svg){width:28px;height:28px;}
.ind-outcomes .svc1-featlist__title{font-size:16px;line-height:1.35;color:#170D3D;}
.ind-outcomes .svc1-featlist__text{font-size:14px;line-height:1.6;color:#5A5A72;}
@media (max-width:1100px){.ind-outcomes .svc1-featlist{grid-template-columns:repeat(3,1fr);gap:28px;}}
@media (max-width:781px){.ind-outcomes .svc1-featlist{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.ind-outcomes .svc1-featlist{grid-template-columns:1fr;}
	.ind-outcomes .ind-outcomes__inner{padding:60px 20px;}}

/* ============================ IND – 04 Success Stories ============================ */
.ind-no-work .ind-work{display:none;}
.ind-work{background:#ffffff;}
.ind-work .ind-work__inner{max-width:1200px;margin:0 auto;padding:84px 24px;}
.ind-work .ind-work__head{
	display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;
}
.ind-work .ind-work__head-text{text-align:left;}
.ind-work .ind-work__head-text .ind-eyebrow .elementor-heading-title,
.ind-work .ind-work__head-text .ind-heading .elementor-heading-title{margin-left:0;margin-right:0;}
.ind-work .ind-work__all{flex:0 0 auto;}
.ind-work .ind-work__all .elementor-button{
	background:transparent;padding:0;border:0;color:#3A0CA3;
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:15px;
	display:inline-flex;align-items:center;gap:7px;transition:gap .2s ease;
}
.ind-work .ind-work__all .elementor-button:hover{gap:11px;}
.ind-work .ind-work__all .elementor-button::after{
	content:"";width:16px;height:16px;flex:0 0 auto;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0CA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-size:contain;background-repeat:no-repeat;
}

/* Loop Grid → 3 vertical cards */
.ind-work .elementor-grid{grid-template-columns:repeat(3,1fr);gap:28px;}
@media (max-width:900px){.ind-work .elementor-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.ind-work .elementor-grid{grid-template-columns:1fr;}}

/* Vertical case-study card (reuses cs_card_badges/metrics + hero_media/title/impact_summary) */
.ind-work-card{
	position:relative;
	display:flex;flex-direction:column;height:100%;overflow:hidden;
	background:#fff;border:1px solid #ECECF3;border-radius:16px;text-decoration:none;
	transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
/* The card link lives on the TITLE (a real anchor, so the accessible name is the case-study name)
   and is stretched over the whole card. Elementor silently drops a dynamic link set on a container,
   which is why the container link that used to be here rendered nothing and the cards were
   completely unclickable. */
.ind-work-card__title .elementor-heading-title a{color:inherit;text-decoration:none;}
.ind-work-card__title .elementor-heading-title a::after{
	content:"";position:absolute;inset:0;z-index:2;
}
.ind-work-card__title .elementor-heading-title a:focus-visible::after{
	outline:2px solid #3A0CA3;outline-offset:-3px;
}
.e-loop-item:hover .ind-work-card,.ind-work-card:hover{
	border-color:#3A0CA3;transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(58,12,163,.30);
}
/* Scrollable screenshot: the full-height image sits in a fixed-height window and pans
   top→bottom on hover (like scrolling the live site). translateY % is relative to the
   image's own height; min(0px, …) means short/landscape images simply don't move.
   NOTE: the cover is an Elementor flex container (.e-con) whose own rule sets
   height:var(--height) / overflow:var(--overflow) and loads AFTER this file — so we must
   both out-specify it (.ind-work-card .ind-work-card__cover) AND set those custom props. */
.ind-work-card .ind-work-card__cover{
	--height:230px;--overflow:hidden;
	position:relative;width:100%;height:230px;overflow:hidden;background:#f2f2f8;
}
.ind-work-card__cover .elementor-widget-container{line-height:0;}
.ind-work-card__cover img{width:100%;height:auto !important;display:block;transition:transform 5s ease;}
.ind-work-card:hover .ind-work-card__cover img,
.e-loop-item:hover .ind-work-card__cover img{transform:translateY(min(0px, calc(230px - 100%)));}
.ind-work-card__body{display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px;}
.ind-work-card__body .cs-card__badges{margin:0;}
.ind-work-card__title .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:19px;line-height:1.3;color:#170D3D;
}
.ind-work-card__excerpt,.ind-work-card__excerpt p{
	margin:0;font-size:14px;line-height:1.6;color:#5A5A72;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Compact, coloured metric strip inside the card (reference = 3 across, number over label).
   [cs_card_metrics] outputs .cs-card__metrics > .cs-card__metric (icon + value + label). */
.ind-work-card .cs-card__metrics{
	flex-direction:row;flex-wrap:wrap;gap:14px 16px;margin-top:auto;padding-top:18px;border-top:1px solid #F0F0F6;
}
.ind-work-card .cs-card__metric{
	flex:1 1 80px;min-width:74px;flex-direction:column;align-items:flex-start;gap:3px;
}
.ind-work-card .cs-card__metric-icon{display:none;}
.ind-work-card .cs-card__metric-value{font-size:23px;line-height:1;color:#0AA3D6;}
.ind-work-card .cs-card__metric-label{font-size:11.5px;line-height:1.3;color:#5A5A72;}
@media (max-width:1024px){
	.ind-work .ind-work__inner{padding:64px 20px;}
	.ind-work .ind-work__head{flex-direction:column;align-items:flex-start;gap:12px;}
}

/* ============================ IND – 05 Process (timeline) ============================ */
/* Reuses GC — Process (options gcp_*) + Feature List "steps"; restyled as a 6-step
   horizontal timeline (numbered circles on a connecting line). */
.ind-no-process .ind-process{display:none;}
.ind-process{background:#F9FAFC;}
.ind-process .ind-process__inner{max-width:1200px;margin:0 auto;padding:84px 24px;}
.ind-process .ind-process__head{text-align:center;margin-bottom:52px;}

.ind-process .svc1-featlist{position:relative;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:0;}
/* connecting line behind the number circles */
.ind-process .svc1-featlist::before{
	content:"";position:absolute;top:27px;left:9%;right:9%;height:2px;z-index:0;
	background:linear-gradient(90deg,rgba(58,12,163,.28),rgba(10,163,214,.28));
}
.ind-process .svc1-featlist--steps .svc1-featlist__item{
	background:transparent;border:0;box-shadow:none;padding:0;padding-top:0;
	text-align:center;align-items:center;gap:8px;position:relative;z-index:1;
}
.ind-process .svc1-featlist--steps .svc1-featlist__item::before{
	position:static;top:auto;left:auto;
	display:inline-flex;align-items:center;justify-content:center;
	width:54px;height:54px;border-radius:50%;padding:0;margin:0 auto 12px;
	background:#3A0CA3;color:#fff;font-size:18px;
	box-shadow:0 0 0 6px #F9FAFC;
}
.ind-process .svc1-featlist__title{font-size:16px;color:#170D3D;text-align:center;}
.ind-process .svc1-featlist__text{font-size:13px;color:#5A5A72;text-align:center;line-height:1.55;}
@media (max-width:1100px){
	.ind-process .svc1-featlist{grid-template-columns:repeat(3,1fr);gap:34px 18px;}
	.ind-process .svc1-featlist::before{display:none;}
}
@media (max-width:600px){
	.ind-process .svc1-featlist{grid-template-columns:repeat(2,1fr);}
	.ind-process .ind-process__inner{padding:60px 20px;}
}

/* ============================ IND – 06 Technology + FAQ (2-col) ============================ */
.ind-no-techfaq .ind-techfaq{display:none;}
.ind-techfaq{background:#ffffff;}
.ind-techfaq .ind-techfaq__inner{
	max-width:1200px;margin:0 auto;padding:84px 24px;
	display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start;
}
/* left-align the shared head inside each column */
.ind-techfaq .ind-eyebrow .elementor-heading-title,
.ind-techfaq .ind-heading .elementor-heading-title{margin-left:0;margin-right:0;text-align:left;}
.ind-techfaq .ind-heading .elementor-heading-title{font-size:30px;}

/* --- Left: technology logo wall --- */
/* The `.ind-tech-logo` TILE itself moved to service-sections.css on 2026-08-02 (search for
   "technology logo tile"): city pages adopted the same loop item #3689, and this stylesheet only
   loads on /industries/, so the tile arrived unstyled there. Only the page-specific grid is left. */
.ind-techfaq__tech .ind-techfaq__tech-head{margin-bottom:26px;}
.ind-techfaq__tech .elementor-grid{grid-template-columns:repeat(3,1fr);gap:16px;}

/* --- Right: FAQ accordion (reuses .svc-faqs / .svc-faq styling from service-sections.css) --- */
.ind-techfaq__faq .ind-techfaq__faq-head{margin-bottom:18px;}
.ind-techfaq__faq .svc-faqs .elementor-loop-container{max-width:none;margin:0;}

@media (max-width:900px){
	.ind-techfaq .ind-techfaq__inner{grid-template-columns:1fr;gap:48px;padding:64px 20px;}
}
@media (max-width:480px){
	.ind-techfaq__tech .elementor-grid{grid-template-columns:repeat(2,1fr);}
}

/* ============================ IND – 07 CTA band ============================ */
/* Reuses the .cs-success-cta band visual (navy→purple gradient + rocket slot) from
   service-sections.css, bound to the independent GC — CTA Band options. */
.ind-no-cta .ind-cta{display:none;}