/* =========================================================
   Saif Aldin Logistics — Main Stylesheet
   Colors extracted from the logo:
   Blue (ship wheel) / Red (anchor) / Gray (wordmark)
========================================================= */

:root{
	--color-primary: #1D8FCB;
	--color-primary-dark: #146D99;
	--color-primary-light: #E8F4FB;
	--color-secondary: #E5312D;
	--color-secondary-dark: #B92220;
	--color-dark: #26333F;
	--color-gray: #5B6670;
	--color-light-bg: #F4F8FB;
	--color-border: #E4EAF0;
	--color-white: #FFFFFF;
	--font-ar: 'Cairo', sans-serif;
	--font-en: 'Poppins', sans-serif;
	--radius: 14px;
	--shadow: 0 10px 30px rgba(38,51,63,.08);
	--container: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family: var(--font-ar), var(--font-en);
	color:var(--color-gray);
	background:var(--color-white);
	line-height:1.75;
	font-size:16px;
}
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ color:var(--color-dark); font-weight:700; line-height:1.35; margin:0 0 16px; }
h1{ font-size:44px; }
h2{ font-size:32px; }
h3{ font-size:20px; }
p{ margin:0 0 16px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:80px 0; }
.eyebrow{
	display:inline-block; color:var(--color-primary); font-weight:700;
	font-size:14px; letter-spacing:.5px; margin-bottom:12px;
	background:var(--color-primary-light); padding:6px 16px; border-radius:99px;
}
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }

/* Buttons */
.btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:14px 28px; border-radius:99px; font-weight:700; font-size:15px;
	border:2px solid transparent; cursor:pointer; transition:.25s ease; white-space:nowrap;
}
.btn-lg{ padding:16px 34px; font-size:16px; }
.btn-primary{ background:var(--color-primary); color:#fff; }
.btn-primary:hover{ background:var(--color-primary-dark); transform:translateY(-2px); }
.btn-outline{ border-color:var(--color-primary); color:var(--color-primary); }
.btn-outline:hover{ background:var(--color-primary); color:#fff; }
.btn-white{ background:#fff; color:var(--color-primary); }
.btn-white:hover{ transform:translateY(-2px); }
.btn-outline-white{ border-color:#fff; color:#fff; }
.btn-outline-white:hover{ background:#fff; color:var(--color-primary); }
.btn-whatsapp{ background:#25D366; color:#fff; padding:10px 18px; }
.btn-whatsapp:hover{ background:#1fb959; }

/* =============== TOP BAR & HEADER =============== */
.top-bar{ background:var(--color-dark); color:#c9d3dc; font-size:13px; }
.top-bar-inner{ display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:8px; }
.top-bar-contact{ display:flex; gap:20px; }
.top-bar-item{ display:flex; align-items:center; gap:6px; color:#c9d3dc; }
.top-bar-item:hover{ color:#fff; }
.top-bar-social{ display:flex; gap:12px; }
.top-bar-social a{ color:#c9d3dc; }
.top-bar-social a:hover{ color:var(--color-primary); }

.site-header{ background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05); position:sticky; top:0; z-index:100; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:24px; }
.site-branding img{ max-height:64px; width:auto; }
.site-title{ font-size:22px; font-weight:800; color:var(--color-dark); }

.main-navigation{ flex:1; display:flex; justify-content:center; }
#primary-menu{ display:flex; gap:32px; }
#primary-menu a{ font-weight:600; color:var(--color-dark); padding:8px 0; position:relative; }
#primary-menu a:hover{ color:var(--color-primary); }
#primary-menu li.current-menu-item > a{ color:var(--color-primary); }

.header-cta{ display:flex; align-items:center; gap:10px; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.menu-toggle span{ width:24px; height:2px; background:var(--color-dark); display:block; }

/* =============== HERO =============== */
.hero{
	position:relative; overflow:hidden;
	background:linear-gradient(135deg, var(--color-primary-light) 0%, #fff 60%);
	padding:80px 0 120px;
}
.hero-inner{ display:flex; align-items:center; gap:48px; }
.hero-text{ flex:1.1; }
.hero-text h1{ font-size:48px; margin-bottom:20px; }
.hero-text p{ font-size:18px; max-width:520px; }
.hero-actions{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.hero-media{ flex:1; display:flex; justify-content:center; }
.hero-media img{ max-width:320px; filter:drop-shadow(0 20px 40px rgba(29,143,203,.25)); }
.hero-illustration{ width:100%; max-width:560px; }
.hero-illustration .truck-group{ animation:truck-bounce 3s ease-in-out infinite; transform-box:fill-box; }
@keyframes truck-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.hero-illustration .wheel{ animation:wheel-spin 2.4s linear infinite; }
@keyframes wheel-spin{ to{ transform:rotate(360deg); } }
.hero-illustration .speed-line{ stroke-dasharray:16 12; animation:speed-dash 1s linear infinite; }
@keyframes speed-dash{ to{ stroke-dashoffset:-28; } }
.hero-wave{
	position:absolute; bottom:-2px; left:0; right:0; height:60px;
	background:var(--color-white);
	border-radius:50% 50% 0 0 / 100% 100% 0 0;
	transform:scaleX(1.4);
}

/* =============== STATS =============== */
.stats-bar{ background:var(--color-dark); padding:36px 0; margin-top:-1px; }
.stats-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; text-align:center; }
.stat-item{ flex:1; min-width:120px; color:#fff; }
.stat-number{ font-size:36px; font-weight:800; color:var(--color-primary); font-family:var(--font-en); }
.stat-plus{ font-size:22px; font-weight:800; color:var(--color-primary); }
.stat-label{ display:block; font-size:14px; color:#c9d3dc; margin-top:4px; }

/* =============== SERVICES =============== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card{
	background:#fff; border:1px solid var(--color-border); border-radius:var(--radius);
	padding:36px 28px; transition:.25s ease;
}
.service-card:hover{ box-shadow:var(--shadow); transform:translateY(-6px); border-color:transparent; }
.service-icon{
	width:64px; height:64px; border-radius:16px; background:var(--color-primary-light);
	margin-bottom:20px; position:relative;
}
.service-icon::before{
	content:""; position:absolute; inset:0; margin:auto; width:30px; height:30px;
	background:var(--color-primary); -webkit-mask-size:contain; mask-size:contain;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
}
.icon-truck::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11v8H3zM14 10h4l3 3v1h-7zM6 18a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11v8H3zM14 10h4l3 3v1h-7zM6 18a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4z'/%3E%3C/svg%3E"); }
.icon-generator::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v10H4zM8 14v4M16 14v4M6 22h12M11 7l-2 3h3l-2 3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v10H4zM8 14v4M16 14v4M6 22h12M11 7l-2 3h3l-2 3'/%3E%3C/svg%3E"); }
.icon-customs::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 4v6c0 5-3.8 8.7-9 10-5.2-1.3-9-5-9-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='%23fff' stroke-width='0'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 4v6c0 5-3.8 8.7-9 10-5.2-1.3-9-5-9-10V6z'/%3E%3C/svg%3E"); }
.icon-check::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.icon-phone::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3-8.7A2 2 0 014.1 2h3a2 2 0 012 1.7 12.7 12.7 0 00.7 2.8 2 2 0 01-.5 2.1L8.1 9.8a16 16 0 006 6l1.2-1.2a2 2 0 012.1-.5 12.7 12.7 0 002.8.7 2 2 0 011.8 2.1z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3-8.7A2 2 0 014.1 2h3a2 2 0 012 1.7 12.7 12.7 0 00.7 2.8 2 2 0 01-.5 2.1L8.1 9.8a16 16 0 006 6l1.2-1.2a2 2 0 012.1-.5 12.7 12.7 0 002.8.7 2 2 0 011.8 2.1z'/%3E%3C/svg%3E"); }
.icon-mail::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4zM4 6l8 7 8-7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4zM4 6l8 7 8-7'/%3E%3C/svg%3E"); }
.icon-pin::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-7.5 8-13a8 8 0 10-16 0c0 5.5 8 13 8 13z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-7.5 8-13a8 8 0 10-16 0c0 5.5 8 13 8 13z'/%3E%3C/svg%3E"); }
.icon-clock::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }

.service-link{ color:var(--color-primary); font-weight:700; font-size:14px; }

/* =============== WHY US =============== */
.why-us-inner{ display:flex; align-items:center; gap:56px; }
.why-us-media{ flex:1; display:flex; justify-content:center; }
.why-us-media img{ max-width:280px; }
.why-us-text{ flex:1.2; }
.feature-list{ margin:24px 0; display:flex; flex-direction:column; gap:14px; }
.feature-list li{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--color-dark); }
.feature-list .icon{ width:26px; height:26px; border-radius:50%; background:var(--color-primary); flex-shrink:0; position:relative; }
.feature-list .icon::before{ content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px; background:#fff; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }

/* =============== CTA BANNER =============== */
.cta-banner{ background:linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); padding:56px 0; }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-inner h2{ color:#fff; margin-bottom:8px; }
.cta-inner p{ color:#e6f2fa; margin:0; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* =============== PAGE HERO (inner pages) =============== */
.page-hero{ background:var(--color-dark); padding:64px 0; text-align:center; }
.page-hero h1{ color:#fff; margin-bottom:8px; }
.page-hero-sub{ color:#c9d3dc; margin:0; }

/* =============== ABOUT PAGE =============== */
.about-inner{ display:flex; align-items:center; gap:56px; }
.about-media{ flex:1; display:flex; justify-content:center; }
.about-media img{ max-width:260px; }
.about-media .port-illustration{ width:100%; max-width:520px; }
.about-text{ flex:1.3; }

/* =============== SERVICES DETAIL =============== */
.services-detailed{ display:flex; flex-direction:column; gap:56px; margin-top:24px; }
.service-detail-row{ display:flex; align-items:center; gap:40px; }
.service-detail-row.reverse{ flex-direction:row-reverse; }
.service-detail-icon{
	width:120px; height:120px; border-radius:24px; background:var(--color-primary-light); flex-shrink:0; position:relative;
}
.service-detail-icon::before{
	content:""; position:absolute; inset:0; margin:auto; width:56px; height:56px;
	background:var(--color-primary); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
}
.service-detail-icon.icon-truck::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11v8H3zM14 10h4l3 3v1h-7zM6 18a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11v8H3zM14 10h4l3 3v1h-7zM6 18a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4z'/%3E%3C/svg%3E"); }
.service-detail-icon.icon-generator::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v10H4zM8 14v4M16 14v4M6 22h12M11 7l-2 3h3l-2 3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v10H4zM8 14v4M16 14v4M6 22h12M11 7l-2 3h3l-2 3'/%3E%3C/svg%3E"); }
.service-detail-icon.icon-customs::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 4v6c0 5-3.8 8.7-9 10-5.2-1.3-9-5-9-10V6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 4v6c0 5-3.8 8.7-9 10-5.2-1.3-9-5-9-10V6z'/%3E%3C/svg%3E"); }

/* =============== TRACKING PAGE =============== */
.tracking-box{ max-width:640px; margin:0 auto 56px; background:var(--color-light-bg); border-radius:var(--radius); padding:40px; text-align:center; }
.tracking-form label{ display:block; font-weight:700; color:var(--color-dark); margin-bottom:12px; }
.tracking-input-row{ display:flex; gap:12px; }
.tracking-input-row input{ flex:1; padding:14px 18px; border-radius:99px; border:1px solid var(--color-border); font-family:inherit; font-size:15px; }
.tracking-result{ margin-top:24px; background:#fff; border-radius:var(--radius); padding:24px; display:flex; align-items:center; gap:16px; }
.tracking-result-icon{ width:44px; height:44px; border-radius:50%; background:#22C55E; flex-shrink:0; position:relative; }
.tracking-result-icon::before{ content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px; background:#fff; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.tracking-result p{ margin:0; color:var(--color-dark); font-weight:600; }

/* =============== CONTACT PAGE =============== */
.contact-info-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.contact-info-card{ text-align:center; padding:32px 20px; border:1px solid var(--color-border); border-radius:var(--radius); }
.contact-info-card .service-icon{ margin:0 auto 16px; }
.contact-info-card a{ color:var(--color-primary); font-weight:600; }

.contact-form-inner{ display:flex; gap:48px; align-items:stretch; }
.contact-form-box{ flex:1.2; background:#fff; padding:40px; border-radius:var(--radius); box-shadow:var(--shadow); }
.contact-form{ margin-top:20px; display:flex; flex-direction:column; gap:16px; }
.form-row{ display:flex; gap:16px; }
.contact-form input, .contact-form select, .contact-form textarea{
	width:100%; padding:14px 16px; border-radius:10px; border:1px solid var(--color-border); font-family:inherit; font-size:15px; background:#fff;
}
.contact-form textarea{ resize:vertical; }
.contact-map{ flex:1; min-height:320px; border-radius:var(--radius); overflow:hidden; }

/* =============== BLOG / INDEX =============== */
.posts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.post-card{ border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; }
.post-card-body{ padding:24px; }
.post-card h2{ font-size:19px; }

/* =============== 404 =============== */
.not-found-section{ text-align:center; }
.not-found-section h1{ font-size:96px; color:var(--color-primary); }

/* =============== FOOTER =============== */
.site-footer{ background:var(--color-dark); color:#c9d3dc; padding-top:64px; }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:40px; }
.footer-logo img{ max-height:56px; margin-bottom:16px; }
.footer-about p{ color:#a9b6c1; font-size:14px; }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:.25s; }
.footer-social a:hover{ background:var(--color-primary); transform:translateY(-3px); }
.footer-social a:has(.icon-facebook){ background:#1877F2; }
.footer-social a:has(.icon-instagram){ background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); }
.footer-social a:has(.icon-linkedin){ background:#0A66C2; }
.footer-widget-title{ color:#fff; font-size:16px; margin-bottom:20px; }
.footer-menu{ display:flex; flex-direction:column; gap:12px; }
.footer-menu a{ color:#a9b6c1; font-size:14px; }
.footer-menu a:hover{ color:var(--color-primary); }
.footer-contact-list{ display:flex; flex-direction:column; gap:14px; }
.footer-contact-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#a9b6c1; }
.footer-contact-list .icon{ width:18px; height:18px; margin-top:2px; flex-shrink:0; position:relative; }
.footer-contact-list .icon::before{ content:""; position:absolute; inset:0; background:var(--color-primary); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:20px 0; }
.footer-bottom-inner{ text-align:center; font-size:13px; color:#a9b6c1; }

.whatsapp-float{
	position:fixed; bottom:24px; left:24px; width:56px; height:56px; border-radius:50%;
	background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.2); z-index:200;
}
.whatsapp-float .icon{ width:26px; height:26px; background:#fff; position:relative; }
.whatsapp-float .icon::before{ content:""; position:absolute; inset:0; background:#fff; -webkit-mask-size:contain; mask-size:contain; }

/* =============== SCROLL REVEAL =============== */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-visible{ transition-delay:.1s; }
.reveal-delay-2.is-visible{ transition-delay:.2s; }
.reveal-delay-3.is-visible{ transition-delay:.3s; }
.reveal-delay-4.is-visible{ transition-delay:.4s; }

/* =============== STICKY HEADER SHRINK =============== */
.site-header{ transition:box-shadow .3s ease; }
.site-header .header-inner{ transition:padding .3s ease; }
.site-header.is-scrolled .header-inner{ padding:8px 24px; }
.site-header.is-scrolled .site-branding img{ max-height:46px; transition:max-height .3s ease; }
.site-branding img{ transition:max-height .3s ease; }

/* =============== HERO ANIMATION =============== */
.hero{ position:relative; }
.hero-shape{
	position:absolute; border-radius:50%; filter:blur(10px); opacity:.35; z-index:0;
	animation:float-shape 8s ease-in-out infinite;
}
.hero-shape.shape-1{ width:180px; height:180px; background:var(--color-primary); top:10%; right:8%; }
.hero-shape.shape-2{ width:120px; height:120px; background:var(--color-secondary); bottom:18%; right:22%; animation-delay:1.5s; }
.hero-shape.shape-3{ width:90px; height:90px; background:var(--color-primary-dark); top:55%; left:6%; animation-delay:3s; }
@keyframes float-shape{
	0%,100%{ transform:translateY(0) scale(1); }
	50%{ transform:translateY(-24px) scale(1.06); }
}
.hero-inner{ position:relative; z-index:1; }
.hero-text h1, .hero-text p, .hero-text .hero-actions, .hero-media{
	opacity:0; transform:translateY(24px); animation:hero-in .8s ease forwards;
}
.hero-text .eyebrow{ opacity:0; transform:translateY(24px); animation:hero-in .8s ease forwards; }
.hero-text .eyebrow{ animation-delay:.05s; }
.hero-text h1{ animation-delay:.15s; }
.hero-text p{ animation-delay:.28s; }
.hero-text .hero-actions{ animation-delay:.4s; }
.hero-media{ animation-delay:.3s; }
@keyframes hero-in{ to{ opacity:1; transform:translateY(0); } }
.hero-media img{ animation:float-logo 5s ease-in-out infinite; animation-delay:1s; }
@keyframes float-logo{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* =============== SERVICE CARD 3D HOVER =============== */
.service-card{ perspective:600px; }
.service-icon{ transition:transform .35s ease; }
.service-card:hover .service-icon{ transform:rotate(-6deg) scale(1.1); }

/* =============== INDUSTRIES SECTION =============== */
.industries-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.industry-card{
	text-align:center; padding:32px 20px; border-radius:var(--radius);
	background:var(--color-light-bg); transition:.3s ease; border:1px solid transparent;
}
.industry-card:hover{ background:#fff; box-shadow:var(--shadow); border-color:var(--color-border); transform:translateY(-6px); }
.industry-icon{
	width:56px; height:56px; margin:0 auto 18px; border-radius:14px;
	background:var(--color-primary); position:relative; transition:transform .35s ease;
}
.industry-card:hover .industry-icon{ transform:scale(1.12) rotate(4deg); }
.industry-icon::before{
	content:""; position:absolute; inset:0; margin:auto; width:26px; height:26px;
	background:#fff; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
}
.industry-icon.icon-construction::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.industry-icon.icon-cart::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2 3h2l2.6 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L22 7H6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2 3h2l2.6 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L22 7H6'/%3E%3C/svg%3E"); }
.industry-icon.icon-snow::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M4.9 4.9l14.2 14.2M19.1 4.9L4.9 19.1M2 12h20'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M4.9 4.9l14.2 14.2M19.1 4.9L4.9 19.1M2 12h20'/%3E%3C/svg%3E"); }
.industry-icon.icon-medical::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.industry-card h3{ font-size:16px; margin-bottom:8px; }
.industry-card p{ font-size:13px; margin:0; }

/* =============== TESTIMONIALS SLIDER =============== */
.testimonials-section{ background:var(--color-light-bg); overflow:hidden; }
.testimonial-track-wrap{ overflow:hidden; }
.testimonial-track{ display:flex; transition:transform .5s ease; }
.testimonial-card{
	flex:0 0 100%; max-width:100%; background:#fff; border-radius:var(--radius);
	padding:40px; text-align:center; box-shadow:var(--shadow); margin:0 auto; max-width:640px;
}
.testimonial-avatar{
	width:64px; height:64px; border-radius:50%; background:var(--color-primary);
	color:#fff; font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center;
	margin:0 auto 16px;
}
.testimonial-quote{ font-size:17px; color:var(--color-dark); font-style:normal; margin-bottom:16px; }
.testimonial-name{ font-weight:700; color:var(--color-dark); }
.testimonial-role{ font-size:13px; color:var(--color-gray); }
.testimonial-dots{ display:flex; justify-content:center; gap:10px; margin-top:28px; }
.testimonial-dot{ width:10px; height:10px; border-radius:50%; background:var(--color-border); border:0; cursor:pointer; padding:0; transition:.25s; }
.testimonial-dot.is-active{ background:var(--color-primary); width:26px; border-radius:99px; }

/* =============== HERO (PHOTO SLIDER) =============== */
.hero-photo{
	position:relative; min-height:640px; display:flex; align-items:center; overflow:hidden;
}
.hero-slide-layer{
	position:absolute; inset:0; background-size:cover; background-position:center;
	opacity:0; transition:opacity 1.4s ease;
}
.hero-slide-layer.is-active{ opacity:1; }
.hero-overlay{
	position:absolute; inset:0; z-index:1;
	background:linear-gradient(115deg, rgba(20,28,36,.88) 0%, rgba(29,143,203,.62) 60%, rgba(20,28,36,.5) 100%);
}
.hero-inner-photo{ position:relative; z-index:2; max-width:760px; }

/* =============== SERVICES (DARK BG WITH NUMBERED CARDS) =============== */
.services-section-dark{
	position:relative; background:var(--color-dark); background-size:cover; background-position:center; padding:90px 0;
}
.services-section-dark::before{ content:""; position:absolute; inset:0; background:rgba(20,28,36,.92); }
.services-section-dark .container{ position:relative; z-index:1; }
.services-section-dark .section-head .eyebrow{ background:rgba(255,255,255,.12); color:#fff; }
.services-section-dark .section-head h2{ color:#fff; }
.service-card-dark{
	background:#fff; border-radius:var(--radius); overflow:hidden; position:relative;
	transition:.3s ease; border:2px solid transparent;
}
.service-card-dark:hover{ transform:translateY(-6px); border-color:var(--color-secondary); }
.service-card-dark .service-card-img{ height:180px; }
.service-card-dark .service-card-img-wrap{ position:relative; }
.service-arrow-badge{
	position:absolute; bottom:-16px; left:16px; width:36px; height:36px; border-radius:50%;
	background:var(--color-secondary); display:flex; align-items:center; justify-content:center;
}
.service-arrow-badge::before{
	content:""; width:16px; height:16px; background:#fff;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M7 7h10v10'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M7 7h10v10'/%3E%3C/svg%3E");
	-webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.service-card-dark .service-card-body{ padding:28px 24px 24px; }
.service-card-dark h3{ font-size:18px; }
.service-num{ color:var(--color-secondary); }
.eyebrow-light{ background:rgba(255,255,255,.12); color:#fff; }
.hero-inner-photo h1{ color:#fff; font-size:56px; margin-bottom:18px; }
.hero-inner-photo h1 .text-accent{ color:var(--color-secondary); }
.hero-inner-photo p{ color:#e7eef4; font-size:19px; max-width:560px; }
.hero-inner-photo .hero-actions{ margin-top:32px; }

/* =============== WHO WE ARE =============== */
.who-we-are-grid{ display:flex; align-items:center; gap:56px; }
.who-we-are-text{ flex:1; }
.who-we-are-text p{ font-size:17px; }
.who-we-are-media{ flex:1; position:relative; }
.who-we-are-media img{ border-radius:var(--radius); width:100%; height:340px; object-fit:cover; box-shadow:var(--shadow); }
.floating-badge{
	position:absolute; bottom:-24px; left:-24px; background:var(--color-secondary); color:#fff;
	border-radius:var(--radius); padding:18px 26px; text-align:center; box-shadow:0 12px 24px rgba(229,49,45,.35);
}
.floating-badge .badge-number{ display:block; font-size:30px; font-weight:800; font-family:var(--font-en); }
.floating-badge .badge-label{ display:block; font-size:12px; }
.who-we-are-row-2{ display:flex; align-items:center; gap:56px; margin-top:80px; }
.who-we-are-row-2 .who-we-are-media{ flex:1; }
.who-we-are-row-2 .who-we-are-media img{ height:260px; }
.who-we-are-row-2 .who-we-are-text{ flex:1.2; }

/* =============== SERVICE CARD IMAGE THUMBNAIL =============== */
.service-card{ overflow:hidden; padding:0; }
.service-card-img{ width:100%; height:170px; object-fit:cover; }
.service-card-body{ padding:28px; }
.service-card .service-icon{ margin-top:-52px; margin-bottom:16px; border:4px solid #fff; box-shadow:var(--shadow); background:var(--color-primary); }
.service-card .service-icon::before{ background:#fff; }

/* =============== WHY CHOOSE US (TIMELINE, PHOTO BG) =============== */
.why-choose-photo{
	position:relative; background-size:cover; background-position:center; padding:90px 0;
}
.why-choose-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,28,36,.9), rgba(20,28,36,.82)); }
.why-choose-inner{ position:relative; z-index:1; }
.why-choose-inner .section-head h2, .why-choose-inner .section-head .eyebrow{ color:#fff; }
.why-choose-inner .section-head .eyebrow{ background:rgba(255,255,255,.12); }
.timeline-row{ display:flex; position:relative; margin-top:56px; }
.timeline-row::before{
	content:""; position:absolute; top:50%; left:0; right:0; height:2px;
	background:rgba(255,255,255,.18); transform:translateY(-50%);
}
.timeline-item{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 16px; position:relative; z-index:1; }
.timeline-item.item-top{ flex-direction:column; }
.timeline-item.item-bottom{ flex-direction:column-reverse; }
.timeline-item h3{ color:#fff; font-size:18px; margin:14px 0 8px; }
.timeline-item p{ color:#c9d3dc; font-size:13.5px; margin:0; }
.timeline-icon{
	width:64px; height:64px; border-radius:50%; background:var(--color-secondary);
	border:5px solid var(--color-dark); position:relative; flex-shrink:0;
}
.timeline-icon::before{
	content:""; position:absolute; inset:0; margin:auto; width:28px; height:28px; background:#fff;
	-webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
}
.timeline-icon.icon-fast::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E"); }
.timeline-icon.icon-team::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a6 6 0 0112 0v2M17 21v-2a4 4 0 00-3-3.87M14 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a6 6 0 0112 0v2M17 21v-2a4 4 0 00-3-3.87M14 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E"); }
.timeline-icon.icon-clock24::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.timeline-icon.icon-tag::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.59 13.41 11 3.83A2 2 0 009.59 3.24L3 3v6.59a2 2 0 00.59 1.41l9.59 9.59a2 2 0 002.82 0l4.59-4.59a2 2 0 000-2.83z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.59 13.41 11 3.83A2 2 0 009.59 3.24L3 3v6.59a2 2 0 00.59 1.41l9.59 9.59a2 2 0 002.82 0l4.59-4.59a2 2 0 000-2.83z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }

/* =============== RESPONSIVE =============== */
@media (max-width: 991px){
	.hero-inner, .why-us-inner, .about-inner, .service-detail-row, .service-detail-row.reverse, .who-we-are-grid, .who-we-are-row-2{ flex-direction:column; text-align:center; }
	.hero-inner-photo{ max-width:100%; text-align:center; margin:0 auto; }
	.hero-inner-photo p{ margin-left:auto; margin-right:auto; }
	.floating-badge{ position:static; display:inline-block; margin-top:-40px; }
	.timeline-row{ flex-direction:column; gap:36px; }
	.timeline-row::before{ display:none; }
	.timeline-item, .timeline-item.item-bottom{ flex-direction:column; }
	.feature-list li{ justify-content:center; }
	.services-grid, .posts-grid, .industries-grid{ grid-template-columns:repeat(2,1fr); }
	.footer-inner{ grid-template-columns:1fr 1fr; }
	.contact-info-grid{ grid-template-columns:repeat(2,1fr); }
	.contact-form-inner{ flex-direction:column; }
	h1{ font-size:34px; }
}
@media (max-width: 767px){
	.top-bar-inner{ justify-content:center; }
	.main-navigation{ display:none; position:absolute; top:100%; right:0; left:0; background:#fff; box-shadow:var(--shadow); padding:16px; }
	.main-navigation.is-open{ display:block; }
	#primary-menu{ flex-direction:column; gap:8px; }
	.menu-toggle{ display:flex; }
	.header-cta .btn-primary{ display:none; }
	.services-grid, .posts-grid, .industries-grid{ grid-template-columns:1fr; }
	.footer-inner{ grid-template-columns:1fr; }
	.contact-info-grid{ grid-template-columns:1fr; }
	.testimonial-card{ padding:28px 20px; }
	.stats-inner{ justify-content:center; }
	.tracking-input-row{ flex-direction:column; }
	.form-row{ flex-direction:column; }
	.hero-inner-photo h1{ font-size:34px; }
	.hero-photo{ min-height:520px; }
}