/* =========================================================================
   Alghammas — global styles + animations (ported from the DCLogic design).
   Section-specific styling lives inline in the template markup, matching the
   original 1:1. This file holds the shared base, keyframes, and hover systems.
   ========================================================================= */

html{scroll-behavior:auto}
body{margin:0;background:#F5F9FC;color:#223A52;direction:rtl;font-family:'Readex Pro',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.7}
a{color:#69C5FF;text-decoration:none}
a:hover{color:#A5DCFF}
::selection{background:#0B487B;color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#06101E}
::-webkit-scrollbar-thumb{background:#0B487B;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#69C5FF}
input,textarea,button,select{font-family:'Readex Pro',system-ui,sans-serif}
input::placeholder,textarea::placeholder{color:#5E7C9C}

/* ---- keyframes ---- */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes pulsering{0%{transform:scale(.35);opacity:.85}100%{transform:scale(2.4);opacity:0}}
@keyframes dashflow{to{stroke-dashoffset:-400}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes raysweep{0%,100%{opacity:.18;transform:rotate(24deg) translateY(0)}50%{opacity:.42;transform:rotate(27deg) translateY(-30px)}}
@keyframes orbdrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(44px,-34px) scale(1.14)}}
@keyframes wavemove{from{transform:translateX(0)}to{transform:translateX(320px)}}
@keyframes blinky{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes scrollwheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes ldrgear{to{transform:rotate(360deg)}}
@keyframes ldrgearrev{to{transform:rotate(-360deg)}}
@keyframes dvGrow{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}
@keyframes dvMove{0%{right:0;opacity:0}12%{opacity:1}100%{right:calc(100% - 26px);opacity:1}}
@keyframes dvMoveS{0%{right:0;opacity:0}14%{opacity:1}100%{right:calc(100% - 16px);opacity:1}}
@keyframes dvFlow{0%{background-position:0% 0}100%{background-position:200% 0}}
@keyframes dvBob{0%,100%{transform:translateY(-50%)}50%{transform:translateY(-66%)}}
@keyframes mqScroll{to{transform:translateX(-25%)}}
@keyframes shpA{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-34px) rotate(12deg)}}
@keyframes shpB{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(26px,-24px) rotate(-14deg)}}
@keyframes shpSpin{to{transform:rotate(360deg)}}

/* ---- typography rhythm ---- */
section h2,footer h2{font-weight:600!important}
section:not(#top){padding-top:78px!important;padding-bottom:78px!important}
.grad{font-weight:600;background:linear-gradient(120deg,#0B487B 5%,#2E8FD8 55%,#69C5FF 95%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- responsive grids ---- */
.aboutGrid{grid-template-columns:0.85fr 1.15fr}
@media(max-width:920px){.aboutGrid{grid-template-columns:1fr}}
.branchGrid{grid-template-columns:0.72fr 1.28fr!important}
@media(max-width:900px){.branchGrid{grid-template-columns:1fr!important}}

/* ---- header (transparent over hero → solid on scroll) ---- */
#hdr.hdr-top #hdrPill{background:transparent!important;box-shadow:none!important;border-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#hdr.hdr-top #hdrPill > a span,#hdr.hdr-top #hdrPill nav a{color:#fff!important;text-shadow:0 1px 12px rgba(0,0,0,.4)}
#hdr.hdr-top #hdrPill nav a svg{stroke:#fff!important}
#hdr.hdr-top #hdrPill > a img{filter:brightness(0) invert(1)!important}

/* ---- hero button icon spin ---- */
.heroBtn svg{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.heroBtn:hover svg{transform:rotate(360deg)}

/* ---- animated section dividers ---- */
.secDiv{position:relative;display:inline-block;width:54px;height:18px;flex:none;vertical-align:middle}
.secDiv .t{position:absolute;top:50%;right:0;left:0;height:1.5px;transform:translateY(-50%);background:currentColor;opacity:.22;border-radius:2px}
.secDiv .f{position:absolute;top:50%;right:0;left:0;height:1.5px;transform:translateY(-50%) scaleX(0);transform-origin:right;border-radius:2px;background:linear-gradient(90deg,transparent,currentColor 42%,currentColor 58%,transparent);background-size:200% 100%}
.secDiv .d{position:absolute;top:50%;right:0;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:#fff;border:1.4px solid currentColor;box-shadow:0 3px 10px rgba(11,72,123,.18);display:grid;place-items:center;opacity:0}
.secDiv.play .f{animation:dvGrow 1s cubic-bezier(.16,1,.3,1) both,dvFlow 3.2s linear 1.15s infinite}
.secDiv.play .d{animation:dvMoveS 1s cubic-bezier(.16,1,.3,1) both,dvBob 2.4s ease-in-out 1.15s infinite}
.secDiv:only-child{width:min(460px,60vw)}
.secDiv:first-child:not(:last-child){transform:scaleX(-1)}
.tlLine{transform:scaleX(0);transform-origin:right;transition:transform 3.2s cubic-bezier(.16,1,.3,1)}
.tlLine.play{transform:scaleX(1)}

/* ---- KSA map ---- */
#ksaMap path[data-rg]{fill:rgba(105,197,255,.10);stroke:rgba(159,224,255,.30);stroke-width:1;transition:fill .35s,stroke .35s;cursor:pointer}
#ksaMap path[data-rg]:hover{fill:rgba(105,197,255,.28);stroke:rgba(159,224,255,.65)}
#ksaMap path[data-rg].rgOn{fill:rgba(105,197,255,.22);stroke:#69C5FF;stroke-width:1.3}
#ksaMap [data-mk]:hover [data-dot]{transform:scale(1.35)}

/* ---- service cards ---- */
.serviceCard > *:not(img){position:relative;z-index:1}
.serviceCard img{transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .5s ease}
.serviceCard:hover img{transform:scale(1.09);opacity:.34}

/* ---- category circles ---- */
.catCircle,.catCircle img{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.catItem:hover .catCircle{transform:translateY(-8px);box-shadow:0 34px 74px rgba(11,72,123,.28)}
.catItem:hover .catCircle img{transform:scale(1.08)}
.catItem:hover .catName{color:#0B487B}

/* ---- why-choose imagery ---- */
.whyImg{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.whyImg img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.whyImg:hover{transform:translateY(-8px);box-shadow:0 42px 90px rgba(11,72,123,.28)}
.whyImg:hover img{transform:scale(1.06)}
.whycard:hover .whybar{width:100%!important}

/* ---- product slider + cards ---- */
.prodSlider{display:flex;overflow-x:auto;gap:22px;scroll-snap-type:x mandatory;padding:4px 2px 20px;scrollbar-width:thin;scrollbar-color:#CFE0EE transparent}
.prodSlider::-webkit-scrollbar{height:8px}
.prodSlider::-webkit-scrollbar-thumb{background:#CFE0EE;border-radius:99px}
.prodSlider::-webkit-scrollbar-track{background:transparent}
.prodCard .pcImg{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.prodCard:hover .pcImg{transform:scale(1.07)}
.prodCard .pcVeil,.prodCard .pcInfo,.prodCard .pcActions{transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
	.prodCard .pcVeil{opacity:0}
	.prodCard .pcInfo{opacity:0;transform:translateY(18px)}
	.prodCard .pcActions{opacity:0;transform:translateX(-10px)}
	.prodCard:hover .pcVeil{opacity:1}
	.prodCard:hover .pcInfo{opacity:1;transform:translateY(0)}
	.prodCard:hover .pcActions{opacity:1;transform:translateX(0)}
}
.prodCard .pcCart{transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s ease}
.prodCard:hover .pcCart{transform:scale(1.08)}

/* ---- brands marquee ---- */
.mqStrip{overflow:hidden;direction:ltr;background:linear-gradient(90deg,#08243F,#0B487B 50%,#08243F);border-top:1px solid rgba(105,197,255,.18);border-bottom:1px solid rgba(105,197,255,.18);padding:17px 0}
.mqTrack{display:flex;width:max-content;direction:ltr;animation:mqScroll 34s linear infinite;will-change:transform}
.mqStrip:hover .mqTrack{animation-play-state:paused}
.mqGroup{display:flex;align-items:center;flex:none}
.mqTxt{font-family:'Readex Pro',sans-serif;font-weight:700;font-size:16.5px;color:#EAF4FC;white-space:nowrap;letter-spacing:.2px}
.mqLogo{width:28px;height:28px;object-fit:contain;margin:0 28px;animation:ldrgear 7s linear infinite;opacity:.92;flex:none}

/* ---- floating background shapes ---- */
.bgShapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bgShapes i{position:absolute;display:block;border:1.5px solid rgba(105,197,255,.16)}
.bgShapes i.f{border:none;background:radial-gradient(circle,rgba(105,197,255,.12),transparent 70%)}

/* ---- reveal system (JS-driven; only hides when JS is present) ---- */
.ag-js [data-rv]{opacity:0}

/* ---- custom cursor (fine pointers only) ---- */
@media (hover:hover) and (pointer:fine){
	.ag-has-cursor, .ag-has-cursor *{cursor:none!important}
	#agDot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:#fff;mix-blend-mode:difference;z-index:99998;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s;will-change:transform,left,top}
	#agRing{position:fixed;top:0;left:0;width:36px;height:36px;border-radius:50%;border:1.6px solid #fff;mix-blend-mode:difference;z-index:99998;pointer-events:none;transform:translate(-50%,-50%);transition:width .28s,height .28s;will-change:left,top}
	#agRing.ag-hot{width:56px;height:56px}
	#agDot.ag-hot{width:11px;height:11px}
}

/* ---- preloader ---- */
#ldr img{will-change:transform}

/* ---- header + footer responsive ---- */
@media(max-width:980px){
	#hdrWrap{padding:12px 16px!important}
	#navLinks{display:none!important}
	#hdr [data-desk]{display:none!important}
	#burger{display:grid!important}

	/* mobile header layout: burger (start) · logo (center) · cart (end) */
	#hdrPill{position:relative;justify-content:space-between!important;padding:8px 12px!important}
	#hdrPill > a:first-child{
		position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
		margin:0;z-index:1;
	}
	/* actions become direct flex children → in RTL: cart lands right, burger left */
	#hdrPill > div:last-child{display:contents!important}
	#hdrSearchBtn{display:none!important}   /* search moves into the mobile menu */
}
@media(max-width:900px){.agFootGrid{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.agFootGrid{grid-template-columns:1fr!important}}

/* =========================================================================
   MOBILE — centre the homepage, hide desk-only widgets
   ========================================================================= */
@media(max-width:780px){
	/* centre every section's content */
	#top .agHeroCopy,
	section .agCenterM,
	#about .aboutGrid > div,
	#branches .branchGrid > div:first-child{
		text-align:center;
	}
	#heroContent{padding:150px 20px 110px!important;text-align:center}
	#heroContent > div{max-width:100%!important;margin:0 auto}
	#heroH1{text-align:center}
	#heroContent [data-rv]{justify-content:center!important}
	#heroContent p{margin-inline:auto!important;text-align:center}
	#heroContent > div > div[data-rv]:last-of-type{justify-content:center!important}

	/* hero stat cards — hidden on mobile (per request) */
	#top [data-desk="1"]{display:none!important}

	/* generic: centre headings, paragraphs, eyebrows and button rows */
	section h2, section h3, section p{text-align:center}
	section .secDiv{display:none}
	section > div > div[style*="text-align:center"]{text-align:center}
	#about .aboutGrid{text-align:center}
	#about .aboutGrid p{margin-inline:auto}
	#about .aboutGrid > div > div[data-rv]{justify-content:center!important}
	#services .serviceCard, #services .serviceCard *{text-align:center}
	#services .serviceCard > div[style*="width:56px"]{margin-inline:auto}
	#services .serviceCard a{justify-content:center}
	#branches .branchGrid p{margin-inline:auto}
	#branches [data-rv][style*="flex-wrap:wrap"]{justify-content:center!important}
	#brPanel{margin-inline:auto}
	#contact form, #contact > div > div{text-align:center}
	#contact label{text-align:right}
	#products #filters{justify-content:center!important}
	#products > div > div:first-child{justify-content:center!important;text-align:center}
	#cats a.catItem{text-align:center}
	footer .agFootGrid{text-align:center}
	footer .agFootGrid > div > div[style*="display:flex"]{justify-content:center!important}
	footer .agFootGrid p{margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
	[data-rv]{opacity:1!important;transform:none!important;transition:none!important}
	.mqTrack,.mqLogo{animation:none!important}
}