/*
Theme Name: BGOT IT Services UAE
Author: BGOT IT Services
Description: BGOT IT Services website for businesses in Abu Dhabi and the UAE.
Version: 17.0.0
Text Domain: it-consultancy-uae
*/

:root{color-scheme:light dark;--navy:#0A1F44;--blue:#00A3E0;--cyan:#00C8FF;--ink:light-dark(#172033,#eef5ff);--muted:light-dark(#607089,#aab9ce);--bg:light-dark(#f5f8fc,#091321);--surface:light-dark(#fff,#101c2c);--surface2:light-dark(#eef5ff,#14243a);--border:light-dark(#dce5f0,#263a53);--shadow:0 18px 50px rgba(10,35,70,.10)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 20% 20%,rgba(33,184,230,.14),transparent 24%),radial-gradient(circle at 80% 75%,rgba(18,100,216,.16),transparent 28%),linear-gradient(115deg,rgba(11,31,58,.08),transparent 45%,rgba(33,184,230,.06));animation:itMotion 16s ease-in-out infinite alternate}
body:after{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;opacity:.28;background-image:linear-gradient(115deg,transparent 0 47%,rgba(33,184,230,.35) 47.15%,transparent 47.35%),linear-gradient(25deg,transparent 0 62%,rgba(18,100,216,.3) 62.15%,transparent 62.35%),radial-gradient(circle,rgba(111,225,255,.85) 0 1px,transparent 1.7px);background-size:100% 100%,100% 100%,72px 72px;animation:networkMotion 22s linear infinite}
@keyframes itMotion{0%{transform:translate3d(-2%,0,0) scale(1)}50%{transform:translate3d(2%,1%,0) scale(1.04)}100%{transform:translate3d(-1%,-2%,0) scale(1.02)}}
@keyframes networkMotion{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(2%,1%,0) rotate(.5deg)}100%{transform:translate3d(-2%,-1%,0) rotate(-.5deg)}}
#app{min-height:100vh;background:var(--bg)}a{text-decoration:none;color:inherit}.container{width:min(1160px,92%);margin:auto}
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:11px;font-weight:850;letter-spacing:.2px}.logo{width:43px;height:43px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-size:12px;font-weight:900;letter-spacing:-1px;box-shadow:0 10px 25px rgba(18,100,216,.25)}.brand small{display:block;color:var(--muted);font-weight:650;font-size:11px;margin-top:2px}.top-contact{display:flex;align-items:center;gap:28px;margin-left:auto;margin-right:10px}.top-contact a{color:var(--ink);font-size:13px;font-weight:800;white-space:nowrap}.top-contact a:first-child:before{content:"☎";margin-right:7px;color:var(--blue)}.top-contact a:last-child:before{content:"✉";margin-right:7px;color:var(--blue)}.navlinks{display:flex;gap:5px;align-items:center}.navlinks a,.lang{padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:700;font-size:14px}.navlinks a:hover,.lang:hover{background:var(--surface2);color:var(--ink)}.lang{border:1px solid var(--border);background:transparent;cursor:pointer}.cta{background:var(--blue)!important;color:#fff!important;border-radius:10px!important}.mobile{display:none}
.hero{padding:78px 0 62px;background:radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 34%),radial-gradient(circle at 10% 10%,color-mix(in srgb,var(--blue) 13%,transparent),transparent 32%)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}.eyebrow{display:inline-flex;padding:8px 12px;border:1px solid var(--border);background:var(--surface);border-radius:999px;color:var(--blue);font-weight:850;font-size:12px}.hero h1{font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-2.8px;margin:18px 0}.hero h1 span{color:var(--blue)}.hero p{font-size:18px;line-height:1.7;color:var(--muted);max-width:640px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{padding:13px 18px;border-radius:11px;font-weight:800;border:1px solid var(--border);background:var(--surface)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.hero-card{background:linear-gradient(145deg,#0b1f3a,#123c70);border-radius:28px;padding:28px;color:#fff;box-shadow:0 30px 70px rgba(8,35,70,.28);min-height:360px;position:relative;overflow:hidden}.hero-card:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;bottom:-90px;background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 55%,transparent),transparent 65%)}.screen{background:#081525;border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:17px;position:relative;z-index:1}.screen-top{display:flex;gap:7px;margin-bottom:18px}.dot{width:8px;height:8px;border-radius:50%;background:#6fe1ff}.bars{display:grid;grid-template-columns:1.2fr .8fr;gap:13px}.barbox{height:92px;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));padding:15px}.line{height:8px;border-radius:9px;background:rgba(255,255,255,.15);margin:10px 0}.line.accent{background:linear-gradient(90deg,var(--cyan),#fff)}
section{padding:76px 0}.section-head{text-align:center;max-width:760px;margin:0 auto 34px}.section-head h2{font-size:36px;letter-spacing:-1.3px;margin:0 0 10px}.section-head p{color:var(--muted);line-height:1.7}.services{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.service{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:23px;min-height:220px;transition:.2s;box-shadow:var(--shadow)}.service:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--blue) 55%,var(--border))}.icon{width:46px;height:46px;border-radius:13px;background:var(--surface2);display:grid;place-items:center;font-size:22px;margin-bottom:18px}.service h3{margin:0 0 8px;font-size:18px}.service p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}.learn{display:inline-block;margin-top:16px;color:var(--blue);font-size:13px;font-weight:850}
.about{background:var(--surface2)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.about h2{font-size:39px;letter-spacing:-1.4px;margin:0 0 16px}.about p{color:var(--muted);line-height:1.8}.checks{display:grid;gap:13px;margin-top:24px}.check{display:flex;gap:11px;align-items:flex-start}.check b{color:var(--blue)}.audit{background:linear-gradient(135deg,#0b1f3a,#0d5fbd);color:#fff;border-radius:25px;padding:38px;position:relative;overflow:hidden}.audit h3{font-size:28px;margin:0 0 9px}.audit p{color:#d7e8ff}.audit .btn{background:#fff;color:#0b1f3a;border:0}
.service-page{display:none}.service-page.active{display:block}.detail-hero{padding:65px 0 30px}.detail-hero h1{font-size:48px;letter-spacing:-2px;margin:14px 0}.detail-hero p{color:var(--muted);line-height:1.8;max-width:760px}.detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;padding-bottom:60px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:27px}.panel h3{margin-top:0}.panel ul{padding-left:20px;color:var(--muted);line-height:1.9}.tagrow{display:flex;flex-wrap:wrap;gap:8px}.tag{padding:8px 10px;border-radius:999px;background:var(--surface2);font-size:12px;font-weight:750}
.contact{background:var(--surface);border-top:1px solid var(--border)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.contact h2{font-size:38px;margin:0 0 12px}.contact p{color:var(--muted);line-height:1.7}.contact-details{display:grid;gap:10px;margin:22px 0}.contact-details a{color:var(--blue);font-weight:800}.contact-location{margin-top:18px;padding:14px 16px;border:1px solid var(--border);border-radius:13px;background:var(--surface2);color:var(--muted);line-height:1.6}.contact-location strong{color:var(--ink)}.form{display:grid;gap:12px}.form input,.form textarea,.form select{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font:inherit}.form textarea{min-height:125px;resize:vertical}.form small{color:var(--muted)}.private{font-size:12px;color:var(--muted);padding:10px 12px;border-radius:10px;background:var(--surface2)}.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:50;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font-size:28px;box-shadow:0 10px 25px rgba(0,0,0,.22);font-weight:900}.whatsapp-float:hover{transform:scale(1.06)}footer{padding:25px 0;color:var(--muted);font-size:13px}.foot{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
[dir=rtl]{font-family:Tahoma,Arial,sans-serif}.rtl-only{display:none}[dir=rtl] .rtl-only{display:inline}[dir=rtl] .en-only{display:none}[dir=rtl] .hero-grid,[dir=rtl] .about-grid,[dir=rtl] .contact-grid,[dir=rtl] .detail-grid{direction:rtl}[dir=rtl] .navlinks{direction:rtl}
@media(max-width:1100px){.top-contact{display:none}}@media(max-width:900px){.services{grid-template-columns:repeat(2,1fr)}.hero-grid,.about-grid,.contact-grid,.detail-grid{grid-template-columns:1fr}.navlinks{display:none}.mobile{display:block}.hero{padding-top:52px}}@media(max-width:560px){.services{grid-template-columns:1fr}.hero h1{font-size:43px}.section-head h2,.about h2,.contact h2{font-size:31px}.hero-card{min-height:280px}.nav{height:68px}}

.service-content{color:var(--muted);line-height:1.8;max-width:850px}.service-content h3{color:var(--ink);margin-top:28px}.service-content ul{padding-left:22px}.service-content li{margin:7px 0}.service-page .detail-hero{padding-bottom:70px}

/* BGOT V12 brand refinements */
.logo{width:58px;letter-spacing:-.8px}.cta,.btn.primary{background:linear-gradient(135deg,var(--blue),var(--cyan))!important;color:#03172e!important;border-color:transparent!important}.hero h1 span,.learn,.contact-details a{color:var(--cyan)}

/* BGOT animated IT hero network */
.hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#06152d 0%,#0A1F44 52%,#07182f 100%);color:#fff}
.hero:before{content:"";position:absolute;inset:-15%;z-index:-2;background:radial-gradient(circle at 18% 32%,rgba(0,200,255,.22),transparent 22%),radial-gradient(circle at 78% 24%,rgba(0,163,224,.18),transparent 25%),radial-gradient(circle at 64% 82%,rgba(0,200,255,.12),transparent 18%);animation:heroGlow 10s ease-in-out infinite alternate}
.hero:after{content:"";position:absolute;inset:-30%;z-index:-1;opacity:.48;background-image:linear-gradient(90deg,rgba(0,200,255,.07) 1px,transparent 1px),linear-gradient(rgba(0,200,255,.06) 1px,transparent 1px);background-size:64px 64px;transform:perspective(500px) rotateX(58deg) translateY(25%);animation:gridDrift 13s linear infinite}
.hero .eyebrow{background:rgba(6,21,45,.7);border-color:rgba(0,200,255,.28);color:var(--cyan)}
.hero p{color:#c5d8ee}.hero .btn:not(.primary){background:rgba(6,21,45,.55);border-color:rgba(0,200,255,.38);color:#fff}
.hero-card{background:rgba(5,20,42,.64);border:1px solid rgba(0,200,255,.22);box-shadow:0 30px 80px rgba(0,0,0,.3),inset 0 0 50px rgba(0,200,255,.04)}
.hero-card .server{position:absolute;inset:34px 38px;display:grid;gap:18px;align-content:center;z-index:2}
.hero-card .rack{height:58px;border:1px solid rgba(0,200,255,.35);border-radius:10px;background:linear-gradient(90deg,rgba(0,200,255,.06),rgba(0,200,255,.16),rgba(0,200,255,.04));box-shadow:inset 0 0 22px rgba(0,200,255,.05)}
.hero-card .rack:before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--cyan);margin:24px 0 0 18px;box-shadow:20px 0 0 #00a3e0,40px 0 0 rgba(0,200,255,.35);animation:ledPulse 1.8s ease-in-out infinite alternate}
.hero-card .network-lines{position:absolute;inset:-20%;z-index:1;opacity:.65;background:radial-gradient(circle at 15% 30%,#00c8ff 0 2px,transparent 3px),radial-gradient(circle at 72% 18%,#00c8ff 0 2px,transparent 3px),radial-gradient(circle at 83% 72%,#00a3e0 0 2px,transparent 3px),radial-gradient(circle at 28% 82%,#00c8ff 0 2px,transparent 3px),linear-gradient(25deg,transparent 49.7%,rgba(0,200,255,.35) 50%,transparent 50.3%),linear-gradient(145deg,transparent 49.7%,rgba(0,163,224,.32) 50%,transparent 50.3%);animation:netFloat 9s ease-in-out infinite alternate}
.hero-card:before{content:"DATA • CLOUD • SECURITY • NETWORK •";position:absolute;white-space:nowrap;left:-10%;bottom:16px;color:rgba(0,200,255,.23);font:700 12px/1 monospace;letter-spacing:8px;animation:dataFlow 12s linear infinite;z-index:3}
@keyframes heroGlow{to{transform:translate3d(3%,-2%,0) scale(1.08)}}
@keyframes gridDrift{to{background-position:64px 64px}}
@keyframes netFloat{to{transform:translate3d(4%,-3%,0) rotate(1.2deg)}}
@keyframes ledPulse{to{filter:brightness(1.8);box-shadow:20px 0 0 #00a3e0,40px 0 12px #00c8ff}}
@keyframes dataFlow{to{transform:translateX(35%)}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero:after,.hero-card .network-lines,.hero-card:before,.hero-card .rack:before{animation:none!important}}

.form-status{padding:12px 14px;border-radius:10px;margin-bottom:12px;font-weight:700}.form-status.success{border:1px solid #00c8ff;background:rgba(0,200,255,.10)}.form-status.error{border:1px solid #ff6b6b;background:rgba(255,107,107,.10)}

/* Navigation, form accessibility and mobile layout refinements */
html{scroll-behavior:smooth;scroll-padding-top:90px}
.navlinks{list-style:none;margin:0;padding:0}
.navlinks li{margin:0;padding:0}
.menu-toggle{display:none;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);padding:9px 12px;font-size:20px;cursor:pointer}
.menu-toggle:focus-visible,.navlinks a:focus-visible,.btn:focus-visible,.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.form label{font-size:14px;font-weight:750;color:var(--ink)}
.itc-honeypot{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.breadcrumbs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding-top:25px;color:var(--muted);font-size:13px}
.breadcrumbs a{color:var(--blue);font-weight:700}
.home-return{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 12px;border:1px solid var(--border);border-radius:10px;color:var(--blue);font-size:14px;font-weight:800}
.home-return:hover{background:var(--surface2);color:var(--ink)}
.language-switch{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--blue);font-weight:800;cursor:pointer;white-space:nowrap}
.language-switch:hover{background:var(--surface2)}
.lang-ar{display:none!important}
body.is-ar .lang-en{display:none!important}
body.is-ar .lang-ar{display:revert!important}
.social-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.social-links a,.foot>a{color:var(--blue);font-weight:750}
.social-link{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:var(--surface)}
.social-link:hover{color:var(--cyan);border-color:var(--cyan)}
.social-icon{width:20px;height:20px;display:block}
.whatsapp-float svg{width:34px;height:34px;display:block}
.contact-location a{display:inline-block;margin-top:8px;color:var(--blue);font-weight:800}
.service-page .detail-hero{padding-top:30px}
.service-content h2{color:var(--ink);font-size:24px;margin:30px 0 12px}
.service-content ul{padding-left:22px}
.location-content{color:var(--muted);line-height:1.8;max-width:900px}
.location-content h2{color:var(--ink);font-size:24px;margin:30px 0 12px}
.location-content ul{padding-left:22px}
.location-content li{margin:8px 0}
.location-content a:not(.btn){color:var(--blue);font-weight:750;text-decoration:underline;text-underline-offset:3px}
.locations-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.location-card{display:block;padding:22px;border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:var(--shadow)}
.location-card h3{margin:0 0 8px;font-size:20px}
.location-card p{color:var(--muted);font-size:14px;line-height:1.65}
.location-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.other-locations{padding:20px 0 60px}
.other-locations h2{font-size:24px}
.location-links{display:flex;flex-wrap:wrap;gap:10px}
.location-links a{padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--blue);font-weight:750}
@media(max-width:900px){
  .locations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{position:relative;justify-content:space-between}
  .menu-toggle{display:block;margin-left:auto}
  .language-switch{margin-left:auto}
  .primary-navigation{display:none;position:absolute;top:100%;left:0;right:0;padding:12px 4%;background:var(--surface);border:1px solid var(--border);border-radius:0 0 16px 16px;box-shadow:var(--shadow)}
  .primary-navigation.is-open{display:block}
  .navlinks{display:flex;flex-direction:column;align-items:stretch;gap:4px}
  .navlinks a{display:block}
  .top-contact{display:none}
}
@media(max-width:560px){
  .locations-grid{grid-template-columns:1fr}
  html{scroll-padding-top:75px}
  .hero h1{letter-spacing:-1.6px}
  .detail-hero h1{font-size:38px;letter-spacing:-1.3px}
  .foot{align-items:flex-start;flex-direction:column}
  .whatsapp-float{width:52px;height:52px;right:15px;bottom:15px}
  .home-return{padding:8px;font-size:12px}
  .language-switch{padding:8px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

.section-link{text-align:center;margin-top:26px}
.directory-intro{max-width:850px;margin-bottom:26px;color:var(--muted);line-height:1.8}
[dir=rtl] .service-content ul,[dir=rtl] .location-content ul,[dir=rtl] .directory-intro ul{padding-right:22px;padding-left:0}

/* BGOT navigation menus: accessible on desktop and touch screens. */
.navlinks>li{position:relative;list-style:none}
.menu-parent{display:flex;align-items:center}
.menu-parent>a{white-space:nowrap}
.submenu-toggle{display:none;align-items:center;justify-content:center;width:30px;height:34px;margin-inline-start:-5px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}
.submenu-toggle:hover,.submenu-toggle:focus-visible{background:var(--surface2);color:var(--blue)}
.sub-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:35;display:none;grid-template-columns:1fr 1fr;gap:3px;min-width:430px;max-height:min(72vh,560px);overflow:auto;margin:0;padding:10px;list-style:none;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow)}
.has-submenu:hover>.sub-menu,.has-submenu:focus-within>.sub-menu,.has-submenu.submenu-open>.sub-menu{display:grid}
.sub-menu li{list-style:none}
.sub-menu a{display:flex!important;align-items:center;gap:10px;min-height:43px;padding:9px 10px!important;border-radius:9px;color:var(--ink)!important;font-size:13px;font-weight:700}
.sub-menu a:hover,.sub-menu a:focus-visible{background:var(--surface2);color:var(--blue)!important}
.menu-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid var(--border);border-radius:9px;background:var(--surface2);font-size:16px}
.services-submenu{min-width:500px}
.locations-submenu{min-width:310px;grid-template-columns:1fr}
.form input:focus,.form textarea:focus,.form select:focus{outline:3px solid color-mix(in srgb,var(--cyan) 38%,transparent);border-color:var(--blue)}
.form .btn{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.form .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,163,224,.2)}
.form-status{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);line-height:1.7}
.form-status.success{border-color:color-mix(in srgb,#25D366 45%,var(--border))}
.form-status.error{border-color:#d64f54}
.primary-navigation a:focus-visible,.navlinks button:focus-visible,.language-switch:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
@media(max-width:900px){
  .navlinks>li{width:100%}
  .navlinks .menu-parent{justify-content:space-between;width:100%}
  .submenu-toggle{display:inline-flex;margin-inline-start:auto}
  .navlinks .sub-menu,.navlinks .services-submenu,.navlinks .locations-submenu{position:static;inset:auto;display:none;grid-template-columns:1fr;min-width:0;max-height:44vh;margin:4px 0 8px;padding:6px;border:0;border-inline-start:2px solid var(--blue);border-radius:0;background:transparent;box-shadow:none}
  .navlinks .has-submenu.submenu-open>.sub-menu{display:grid}
  .navlinks .sub-menu a{min-height:40px}
}