*{box-sizing:border-box;margin:0}html,body{overflow-x:clip;max-width:100%;width:100%}body{position:relative}img,iframe{max-width:100%}body{font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;color:#0f2342;background:#fff}a{color:inherit;text-decoration:none}
:root{--n:#12294a;--b:#1a73e8}.w{width:100%;max-width:1024px;margin:auto;padding:0 16px}
.top{background:var(--n);color:#fff;font-size:12px;padding:10px 0}.top .w,.top .w>div{display:flex;justify-content:space-between;gap:22px}
.hd{display:flex;align-items:center;gap:24px;padding:14px 16px}.logo{display:flex;gap:8px;align-items:center;color:var(--n)}.logo svg{flex:none}.logo b{font-size:26px;display:block;line-height:1}.logo i{color:var(--b);font-style:normal}.logo small{font-size:11px;color:#555}.logo.lt{color:#fff}.logo.lt small{color:#cbd5e1}
.srch{flex:1;display:flex;background:#eef1f5;border-radius:30px;overflow:hidden;height:46px;padding:3px}.srch input{flex:1;border:0;background:none;padding:0 16px;font:inherit;outline:0}.srch button{width:52px;border:0;border-radius:30px;background:var(--b);color:#fff}
.ic{text-align:center;position:relative;font-size:22px}.ic small{display:block;font-size:11px}.ic em{position:absolute;top:-6px;right:-4px;background:var(--b);color:#fff;font-size:10px;width:16px;height:16px;border-radius:50%;font-style:normal}
.nav{display:flex;gap:22px;font-size:13px;font-weight:600;padding-bottom:12px;overflow-x:auto;white-space:nowrap}.nav .on{color:var(--b);border-bottom:2px solid var(--b)}.nav .offer{background:#d42a2a;color:#fff;padding:3px 12px;border-radius:20px;order:99}
.hero{background-size:cover;background-position:left;min-height:304px;color:#fff;display:flex;align-items:center;background-color:#2b2f36;position:relative}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(35,40,48,.97) 0 45%,transparent 80%)}.hero .w{position:relative;width:100%}
.hero h1{font-size:34px;font-weight:500}.hero h1 b{display:block;font-size:40px;color:#2f8dff;margin-bottom:12px}.hero p{font-size:16px;line-height:1.8;margin-bottom:18px;color:#e6e9ee}
.btn{display:inline-block;background:var(--b);color:#fff;padding:12px 40px;border-radius:30px;font-weight:600}.btn.sm{padding:8px 14px;font-size:12px;border-radius:6px;width:100%;text-align:center}.btn.w2{background:#fff;color:var(--n);padding:7px 22px;font-size:12px}
.feats{display:grid;grid-template-columns:repeat(4,1fr);padding:18px 16px;font-size:26px;color:var(--b)}.feats div{display:flex;gap:10px;align-items:center}.feats b{font-size:13px;color:var(--n);display:block}.feats small{font-size:11px;color:#666;font-weight:400}
.circ{display:flex;justify-content:space-between;gap:8px;padding:6px 16px 22px;overflow-x:auto}.circ a{text-align:center;font-size:12px;font-weight:600;flex:none;width:100px}.circ img{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 6px}
.bns{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:22px}.bn{height:159px;border-radius:6px;background-size:cover;background-position:center;position:relative;color:#fff;overflow:hidden;display:flex;align-items:center}
.bn:before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#1f5b92 0 52%,transparent 90%)}.bn.l:before{background:linear-gradient(90deg,#6d6258 0 50%,transparent 90%)}.bn>div{position:relative;padding:0 18px;width:100%}.bn h3{font-size:19px}.bn p{font-size:13px;margin:4px 0 10px}
.bns+.sh,.sh{display:flex;justify-content:space-between;flex-direction:row;align-items:center;margin:8px auto 12px}.sh h2{font-size:21px}.sh a{color:var(--b);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}.card{border:1px solid #e5e9f0;border-radius:6px;padding:6px;text-align:center;position:relative;font-size:12px}.card img{width:100%;height:105px;object-fit:cover;border-radius:4px}.card i{position:absolute;top:10px;left:10px;font-style:normal}.card h4{font-size:11px;font-weight:500;margin:8px 0 4px}.card b{display:block;font-size:14px;margin-bottom:8px}
.brands{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee;padding:18px 16px;font-weight:700;color:#555}.brands>b{color:var(--n)}.brands a{color:var(--b);font-size:12px}
footer{background:var(--n);color:#fff;font-size:13px}.fg{display:grid;grid-template-columns:1.2fr .7fr 1.2fr 1.1fr;gap:28px;padding:34px 16px}.fg h5{font-size:15px;margin-bottom:12px}.fg a,.fg p{display:block;margin-bottom:9px;color:#cbd5e1}.so{letter-spacing:12px;margin-top:12px}
.nl{display:flex;background:#fff;border-radius:6px;padding:4px}.nl input{flex:1;border:0;padding:0 8px;font:inherit;min-width:0}.nl .btn{width:auto}.cp{display:flex;justify-content:space-between;border-top:1px solid #2c4468;padding:16px;font-size:12px}
.tb{width:100%;margin:10px 0}.tb td{padding:8px;border-bottom:1px solid #eee}

@media(max-width:800px){
.top{font-size:11px;padding:8px 0}.top .w{overflow:hidden}.top .w>div{gap:14px;white-space:nowrap}.top .w>div:first-child span:first-child,.top .w>div:last-child span:first-child{display:none}
.hd{display:grid;grid-template-columns:1fr auto auto;gap:10px 14px;padding:12px 16px}.logo b{font-size:22px}.logo svg{width:42px;height:38px}.logo small{font-size:10px}.srch{grid-column:1/-1;order:3;height:42px}.ic{font-size:20px}.ic small{font-size:10px}
.nav{gap:18px;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.hero{min-height:360px;background-position:30% center}.hero:before{background:linear-gradient(180deg,rgba(35,40,48,.9),rgba(35,40,48,.75))}.hero h1{font-size:22px}.hero h1 b{font-size:27px;margin-bottom:8px}.hero p{font-size:14px;margin-bottom:16px}.btn{padding:11px 30px;font-size:14px}
.feats{grid-template-columns:1fr 1fr;gap:14px 8px;font-size:22px}.feats b{font-size:12px}.feats small{font-size:10px}
.circ{gap:10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}.circ a{width:84px;scroll-snap-align:start;font-size:11px}.circ img{width:72px;height:72px}
.bns{grid-template-columns:1fr;gap:10px}.bn{height:150px}
.grid{grid-template-columns:repeat(2,1fr);gap:10px}.card img{height:130px}.card h4{font-size:12px;min-height:30px}
.sh h2{font-size:18px}.brands{flex-wrap:wrap;gap:10px 16px;justify-content:center}
.fg{grid-template-columns:1fr;gap:22px;padding:26px 16px}.cp{flex-direction:column;gap:6px;text-align:center}footer iframe{height:280px!important}
.tb{display:block;overflow-x:auto}}
@media(max-width:380px){.logo b{font-size:19px}.hero h1{font-size:19px}.hero h1 b{font-size:23px}.card img{height:110px}.circ a{width:76px}.feats{grid-template-columns:1fr}.bn h3{font-size:16px}}

.nav a,.top span,.brands span,.circ a,.ic{flex:none}.hd>*,.grid>*,.bns>*,.fg>*,.feats>*{min-width:0}.srch input{min-width:0;width:100%}
