/* ===== BLOCK 3 ===== */
.tt-proj-ind {
background: #ffffff;
padding: 110px 0;
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}
.tt-proj-ind-header {
text-align: center; max-width: 760px; margin: 0 auto 60px;
}
.tt-proj-ind-header h2 {
font-size: clamp(28px, 3.5vw, 44px); font-weight: 900;
color: #0a2a5e; margin: 0 0 16px; letter-spacing: -0.5px;
}
.tt-proj-ind-header p {
font-size: 16px; color: #6b7a90; line-height: 1.8; margin: 0;
}
.tt-ind-grid {
display: grid; grid-template-columns: repeat(4,1fr);
gap: 22px; margin-bottom: 90px;
}
.tt-ind-card {
background: #f7fafd; border-radius: 20px;
padding: 30px 22px; text-align: center;
border: 1px solid rgba(10,42,94,0.06);
transition: all 0.45s ease;
}
.tt-ind-card:hover {
background: #ffffff;
transform: translateY(-10px);
box-shadow: 0 22px 55px rgba(8,120,232,0.14);
border-color: rgba(8,120,232,0.22);
}
.tt-ind-icon {
width: 60px; height: 60px; margin: 0 auto 16px;
display: grid; place-items: center; border-radius: 18px;
background: linear-gradient(135deg, rgba(8,120,232,0.12), rgba(22,201,255,0.08));
font-size: 26px; color: #0878e8;
}
.tt-ind-card h4 {
font-size: 15px; font-weight: 800; color: #0a2a5e; margin: 0 0 8px;
}
.tt-ind-card p {
font-size: 12.5px; line-height: 1.7; color: #6b7a90; margin: 0;
}
/* Metrics Bar */
.tt-metrics {
background: linear-gradient(135deg, #0a2a5e 0%, #061637 60%, #0878e8 100%);
border-radius: 28px;
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 30px;
position: relative;
overflow: hidden;
}
.tt-metrics::before {
content: ""; position: absolute; top: -50%; right: -10%;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(22,201,255,0.18), transparent 70%);
pointer-events: none;
animation: ttMetricsOrb 14s ease-in-out infinite alternate;
}
@keyframes ttMetricsOrb { to { transform: translate(-40px, 30px) scale(1.15); } }
.tt-metric-item { text-align: center; position: relative; z-index: 1; }
.tt-metric-number {
font-size: clamp(32px, 4vw, 52px); font-weight: 900;
color: #ffffff; line-height: 1; margin-bottom: 10px;
display: block;
}
.tt-metric-number span { color: #16c9ff; }
.tt-metric-label {
font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: #7be7ff;
}
.tt-reveal {
opacity: 0; transform: translateY(50px);
transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.tt-reveal.tt-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
.tt-ind-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
.tt-metrics { grid-template-columns: repeat(2,1fr); gap: 40px; padding: 50px 30px; }
}
@media (max-width: 560px) {
.tt-proj-ind { padding: 60px 0; }
.tt-ind-grid { grid-template-columns: 1fr; }
.tt-metrics { grid-template-columns: repeat(2,1fr); gap: 30px; padding: 40px 24px; border-radius: 22px; }
}
🥛
Food & Beverage
Dairy, beverage, bakery, and processed food plants.
💊
Pharmaceutical
Generic drug, cosmetic, and medical device manufacturing.
⚡
Power Generation
Steam boilers, gas turbines, and cogeneration plants.
🏨
Hotels & Resorts
5-star hotels, Red Sea resorts, and hospitality groups.
🧵
Textile & Dyeing
Dyeing, finishing, and garment manufacturing facilities.
🏭
Heavy Industry
Steel, cement, glass, and general manufacturing plants.
🚰
Municipal Water
Potable water treatment and small-scale desalination.
🛢️
Oil & Gas
Refinery utilities, produced water, and process water.
15+
Industries Served
50+
Projects Delivered
100+
Global Brands
24/7
Support Available
(function(){
var els = document.querySelectorAll('#tt-proj-ind .tt-reveal');
if (!('IntersectionObserver' in window)) { els.forEach(function(e){ e.classList.add('tt-visible'); }); return; }
var obs = new IntersectionObserver(function(entries){
entries.forEach(function(entry){
if (entry.isIntersecting) {
var el = entry.target;
var delay = parseInt(el.getAttribute('data-delay') || '0', 10);
setTimeout(function(){ el.classList.add('tt-visible'); }, delay);
obs.unobserve(el);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
els.forEach(function(e){ obs.observe(e); });
})();
