暂无描述
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296
  1. /*
  2. 0 - 600px: Phone
  3. 600 - 900px: Tablet portrait
  4. 900 - 1200px: Tablet landscape
  5. [1200 - 1800] is where our normal styles apply
  6. 1800px + : Big desktop
  7. $breakpoint arguement choices:
  8. - phone
  9. - tab-port
  10. - tab-land
  11. - big-desktop
  12. ORDER: Base + typography > general layout + grid > page layout > components
  13. 1em = 16px
  14. */
  15. body {
  16. box-sizing: border-box;
  17. overflow-x: hidden;
  18. }
  19. @media only screen and (max-width: 900px) {
  20. body {
  21. padding: 0;
  22. }
  23. }
  24. .bg-green {
  25. background-color: #3bb78f;
  26. background: linear-gradient(90deg, #3bb78f 0%, rgb(11, 171, 100) 35%, rgb(59, 183, 143) 100%);
  27. }
  28. .text-green-Awni {
  29. color: #0A886A;
  30. }
  31. .anwi_grey_bg {
  32. background-color: #ECECEC;
  33. }
  34. .orbitron_font {
  35. font-family: "Orbitron", sans-serif;
  36. }
  37. .satoshi_font {
  38. font-family: "Satoshi", sans-serif;
  39. }
  40. .font-1 {
  41. font-size: 1rem;
  42. }
  43. .font-3 {
  44. font-size: 3rem;
  45. }
  46. .font-1-2 {
  47. font-size: 1.2rem;
  48. }
  49. .font-1-5 {
  50. font-size: 1.5rem;
  51. }
  52. .font-1_5 {
  53. font-size: 2rem;
  54. }
  55. .font-1_7 {
  56. font-size: 1.7rem;
  57. }
  58. .font-2 {
  59. font-size: 2rem;
  60. }
  61. .font-2_2 {
  62. font-size: 2.2rem;
  63. }
  64. .font-2_7 {
  65. font-size: 2.7rem;
  66. }
  67. .font_4 {
  68. font-size: 4rem;
  69. }
  70. .font-5 {
  71. font-size: 5rem;
  72. }
  73. .font-6 {
  74. font-size: 6rem;
  75. }
  76. .font-7 {
  77. font-size: 7rem;
  78. }
  79. .font-10 {
  80. font-size: 10rem;
  81. }
  82. .subtitle_1 {
  83. font-size: 1.5rem;
  84. }
  85. .banner_heading_4 {
  86. font-size: 3rem;
  87. }
  88. .padding_top_14 {
  89. padding-top: 14rem;
  90. }
  91. .p-6 {
  92. padding: 5rem;
  93. }
  94. .ps-7 {
  95. padding-left: 6rem;
  96. }
  97. .px-6 {
  98. padding-left: 6rem;
  99. padding-right: 6rem;
  100. }
  101. .p-7 {
  102. padding: 7rem;
  103. }
  104. .padding_top_10 {
  105. padding-top: 10rem;
  106. }
  107. .padding_top_13 {
  108. padding-top: 13rem;
  109. }
  110. .padding_bottom_ONE_FIVE {
  111. padding-bottom: 1.5rem;
  112. }
  113. .h-10 {
  114. height: 10%;
  115. }
  116. .h-15 {
  117. height: 15%;
  118. }
  119. .h-20 {
  120. height: 20%;
  121. }
  122. .h-30 {
  123. height: 30%;
  124. }
  125. .h-33 {
  126. height: 33%;
  127. }
  128. .h-34 {
  129. height: 34%;
  130. }
  131. .h-35 {
  132. height: 35%;
  133. }
  134. .h-40 {
  135. height: 40%;
  136. }
  137. .vh_60 {
  138. height: 60vh;
  139. }
  140. .vh-70 {
  141. height: 70vh;
  142. }
  143. .vh-77 {
  144. height: 77vh;
  145. }
  146. .vh-85 {
  147. height: 85vh;
  148. }
  149. .vh-15 {
  150. height: 15vh;
  151. }
  152. .h-700p {
  153. height: 700px;
  154. }
  155. .h-25 {
  156. height: 25%;
  157. }
  158. .h-60 {
  159. height: 60%;
  160. }
  161. .h-75 {
  162. height: 75%;
  163. }
  164. .w-60 {
  165. width: 60%;
  166. }
  167. .w-20p {
  168. width: 20px;
  169. }
  170. .w-200 {
  171. width: 200px;
  172. }
  173. .fw-500 {
  174. font-weight: 500;
  175. }
  176. .fw-600 {
  177. font-weight: 600;
  178. }
  179. .fw-700 {
  180. font-weight: 700;
  181. }
  182. .h-200p {
  183. height: 200px;
  184. }
  185. .mt-7 {
  186. margin-top: 7rem;
  187. }
  188. .sec-space-1 {
  189. margin-top: 80px;
  190. }
  191. .sec-space-2 {
  192. margin-top: 60px;
  193. }
  194. .sec-space-3 {
  195. margin-top: 40px;
  196. }
  197. .sec-space-4 {
  198. margin-top: 20px;
  199. }
  200. .sec-space-5 {
  201. margin-top: 0px;
  202. }
  203. .h-100p {
  204. height: 100px;
  205. }
  206. .gap-1 {
  207. gap: 0.7rem;
  208. }
  209. .gap-2 {
  210. gap: 2rem;
  211. }
  212. .br-1 {
  213. border-radius: 1rem;
  214. }
  215. .cursor-pointer {
  216. cursor: pointer;
  217. }
  218. .mt-5C {
  219. margin-top: 5rem;
  220. }
  221. .button_dark {
  222. -webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
  223. clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
  224. padding-right: 1.7rem;
  225. padding-bottom: 0.6rem;
  226. padding-top: 0.6rem;
  227. border-radius: 10px;
  228. }
  229. .productOverviewBody {
  230. overflow-x: hidden;
  231. }
  232. .productoverviewmain {
  233. background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
  234. background-color: white;
  235. background-size: cover;
  236. background-repeat: no-repeat;
  237. background-position: center;
  238. position: relative;
  239. }
  240. .photo_dual {
  241. width: 40rem;
  242. }
  243. .price_footer {
  244. background: rgba(255, 255, 255, 0.25);
  245. /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
  246. backdrop-filter: blur(4px);
  247. -webkit-backdrop-filter: blur(4px);
  248. border: 1px solid rgba(255, 255, 255, 0.18);
  249. border: 2px solid;
  250. position: absolute;
  251. z-index: 999;
  252. bottom: 0;
  253. left: 0;
  254. }
  255. @media (max-width: 768px) {
  256. .footerDesText {
  257. width: 100%;
  258. }
  259. }
  260. .boxImgContainer {
  261. width: 4rem;
  262. }
  263. .priceCut_multi {
  264. font-size: 0.7rem;
  265. }
  266. .PO_learnMore {
  267. font-size: 0.7rem;
  268. }
  269. .productOverview .overviewProductHeading {
  270. font-size: 2.1rem;
  271. font-family: "satoshi", sans-serif;
  272. font-weight: 500;
  273. }
  274. .productOverview .overviewProductFullTitle {
  275. padding: 2rem 11rem;
  276. font-size: 3rem;
  277. font-family: "orbitron", sans-serif;
  278. }
  279. .productOverview .overviewProductDes {
  280. padding: 0 2rem;
  281. font-size: 1.5rem;
  282. font-family: "satoshi", sans-serif;
  283. }
  284. .PO_galleryContainer .PO_gallery_display {
  285. min-height: 500px;
  286. width: 100%;
  287. background: white;
  288. background: linear-gradient(180deg, white 7%, rgba(255, 142, 158, 0.3019607843) 52%, rgba(235, 134, 148, 0.4705882353) 100%);
  289. position: relative;
  290. overflow: hidden;
  291. }
  292. .PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
  293. position: absolute;
  294. top: 50%;
  295. left: 50%;
  296. transform: translate(-50%, -46%);
  297. }
  298. .PO_gallery_box {
  299. padding: 1rem;
  300. }
  301. .PO_galleryContainer .PO_gallery_box_inner {
  302. padding: 1rem;
  303. background-color: #eeeeee;
  304. }
  305. .mobileAw {
  306. display: none;
  307. }
  308. .productoverBox {
  309. height: 900px;
  310. }
  311. .productoverBox .productoverBox-1 {
  312. height: 225px;
  313. }
  314. .productoverBox .productoverBox-2 {
  315. height: 225px;
  316. }
  317. .productoverBox .productoverBox-2 .futureProof {
  318. position: relative;
  319. }
  320. .productoverBox .productoverBox-2 .futureProofImg {
  321. position: absolute;
  322. top: 0;
  323. right: 0;
  324. width: 50%;
  325. }
  326. .productoverBox .productoverBox-3 {
  327. height: 225px;
  328. }
  329. .productoverBox .productoverBox-4 {
  330. height: 225px;
  331. }
  332. .productoverBox .productoverBox-5 {
  333. height: 200px;
  334. overflow: hidden;
  335. }
  336. .productoverBox .productoverBox-5 .box_innerImg {
  337. position: absolute;
  338. right: 8%;
  339. top: 0;
  340. height: 100%;
  341. }
  342. .productoverBox .productoverBox-5 .box_innerImg img {
  343. scale: 1.2;
  344. }
  345. .productoverBox .productoverBox-6 {
  346. height: 150px;
  347. }
  348. .productoverBox .productoverBox-7 {
  349. height: 225px;
  350. position: relative;
  351. }
  352. .productoverBox .productoverBox-7 .gridTruelifeImg {
  353. position: absolute;
  354. width: 85%;
  355. bottom: 0;
  356. left: 0;
  357. }
  358. .productoverBox .productoverBox-8 {
  359. height: 60px;
  360. }
  361. .productoverBox .productoverBox-9 {
  362. height: 230px;
  363. }
  364. .productoverBox .productoverBox-10 {
  365. height: 150px;
  366. }
  367. .productoverBox .productoverBox-11 {
  368. height: 180px;
  369. }
  370. .productoverBox .productoverBox-12 {
  371. height: 75px;
  372. }
  373. .productoverBox .PO_box {
  374. height: 100%;
  375. }
  376. .productoverBox .PO_box > div {
  377. padding: 1rem 0rem;
  378. }
  379. .productoverBox .PO_box .box_inner {
  380. position: relative;
  381. }
  382. .productoverBox .PO_box .bgBox_Content {
  383. background: rgb(236, 236, 236);
  384. background: linear-gradient(90deg, rgb(236, 236, 236) 4%, rgb(118, 118, 118) 100%);
  385. }
  386. .productoverBox .PO_box .box_inner_right {
  387. padding-left: 1rem;
  388. }
  389. .productoverBox .PO_box .box_inner_left {
  390. padding-right: 1rem;
  391. }
  392. .specsgrid {
  393. display: grid;
  394. height: 100vh;
  395. gap: 20px;
  396. grid-template-columns: repeat(8, minmax(5%, 1fr));
  397. grid-template-rows: repeat(12, minmax(5%, 1fr));
  398. }
  399. .specsgrid .specsItem {
  400. background-color: red;
  401. }
  402. .specsgrid .specsItem-1 {
  403. grid-column: 1/4;
  404. grid-row: 1/4;
  405. }
  406. .specsgrid .specsItem-2 {
  407. grid-column: 1/4;
  408. grid-row: 1/4;
  409. }
  410. .displayscreenpad .displayscreenpadContainer {
  411. text-align: center;
  412. }
  413. .displayscreenpad .displayscreenpadHeading {
  414. font-size: 8rem;
  415. }
  416. .displayscreenpad .displayscreenpadMain {
  417. margin-top: -8%;
  418. }
  419. .displayscreenpad .displayscreenpadleft > img {
  420. left: -8%;
  421. }
  422. .displayscreenpad .displayscreenpadright > img {
  423. right: -10%;
  424. }
  425. .dual_des_heading {
  426. font-size: 3rem;
  427. }
  428. .dualLaptop {
  429. width: 100vw;
  430. top: -100px;
  431. margin-top: 100px;
  432. margin-bottom: -100px;
  433. position: relative;
  434. }
  435. .dualLaptop .zeroBMain_desP {
  436. font-size: 1.2rem;
  437. }
  438. .dualLaptop .zeroBMain_des {
  439. position: absolute;
  440. top: 0;
  441. right: 0;
  442. max-width: 700px;
  443. padding-right: 9rem;
  444. }
  445. .dualLaptop .dualImgs {
  446. position: absolute;
  447. }
  448. .dualLaptop .dualImgs .dualImgsInner {
  449. width: 50rem;
  450. }
  451. .dualLaptop .dualImgsOne {
  452. top: 0;
  453. left: -10rem;
  454. transform: rotate(343deg);
  455. width: 68%;
  456. }
  457. .dualLaptop .dualImgsTwo {
  458. top: 14rem;
  459. right: -62%;
  460. transform: rotate(339deg);
  461. }
  462. .dualLaptop .dualImgsTwo .dualImgsInner {
  463. width: 82%;
  464. }
  465. .tableLaptop {
  466. margin-top: 300px;
  467. height: 90vh;
  468. width: 100vw;
  469. position: relative;
  470. margin-bottom: 300px;
  471. }
  472. .tableLaptop .circleTableLaptop_Heading {
  473. position: absolute;
  474. top: 50%;
  475. left: 50%;
  476. transform: translate(-50%, -311%);
  477. }
  478. .tableLaptop .justTableLaptop {
  479. position: absolute;
  480. width: 86%;
  481. top: -10px;
  482. right: 128px;
  483. z-index: 1;
  484. }
  485. .tableLaptop .circleTableLaptop {
  486. background-color: #ececec;
  487. height: 70rem;
  488. width: 70rem;
  489. border-radius: 50%;
  490. position: relative;
  491. overflow: hidden;
  492. }
  493. .tableLaptop .circleTableLaptop .circleTableLaptopTop {
  494. bottom: -3%;
  495. width: 80%;
  496. position: absolute;
  497. top: 50%;
  498. left: 50%;
  499. transform: translate(-50%, 2%);
  500. }
  501. .tableLaptop .circleTableLaptop_text {
  502. position: absolute;
  503. top: 50%;
  504. left: 50%;
  505. transform: translate(-50%, 106%);
  506. }
  507. .trueLifeDisplay .trueLifeDisplay_headingHD > .headingLife {
  508. font-size: 6rem;
  509. }
  510. .trueLifeDisplay .trueLifeDisplay_des {
  511. padding: 0 10rem;
  512. }
  513. .font_p_Dual {
  514. font-size: 1.2rem;
  515. }
  516. .tableLaptopTwo {
  517. width: 100vw;
  518. height: 100vh;
  519. background-image: url("../../dist/assets/imgs/sectiontest.png");
  520. background-color: white;
  521. background-size: contain;
  522. background-repeat: no-repeat;
  523. background-position: center;
  524. }
  525. .dragondisplay {
  526. position: relative;
  527. background: rgb(255, 255, 255);
  528. background: linear-gradient(184deg, rgb(255, 255, 255) 4%, rgb(235, 255, 133) 100%);
  529. overflow: hidden;
  530. }
  531. .dragondisplay .dragondisplay_heading {
  532. position: absolute;
  533. bottom: -4%;
  534. margin: auto;
  535. width: 100%;
  536. }
  537. .dragondisplay .dragondisplay_heading > h1 {
  538. font-size: 8rem;
  539. text-align: center;
  540. }
  541. .dragondisplay .dragondisplay_des {
  542. max-width: 600px;
  543. position: absolute;
  544. right: 0;
  545. top: 13%;
  546. padding: 4rem;
  547. }
  548. .intelGen .intelGenUL {
  549. max-width: 250px;
  550. gap: 8rem;
  551. }
  552. .intelGen .intelGenUL .intelGenULHeading {
  553. font-size: 1.8rem;
  554. font-weight: 700;
  555. border-bottom: 2px solid;
  556. }
  557. .intelGen .cpuSection {
  558. background-image: url("./../../dist/assets/imgs/productoverview/cpu.png");
  559. background-color: white;
  560. background-size: cover;
  561. background-repeat: no-repeat;
  562. background-position: center;
  563. }
  564. @media (max-width: 1200px) {
  565. .productOverview .p-6 {
  566. padding: 0;
  567. }
  568. .productOverview .overviewProductFullTitle {
  569. padding: 2rem 5rem;
  570. font-size: 2rem;
  571. }
  572. .productOverview > div {
  573. padding: 0;
  574. }
  575. .dualLaptop .dualImgsTwo .dualImgsInner {
  576. transform: rotate(339deg) translateX(57%) translateY(55%);
  577. }
  578. .productOverview .overviewProductFullTitle {
  579. font-size: 1rem;
  580. padding: 2rem 0rem;
  581. }
  582. .productOverview .overviewProductDes {
  583. font-size: 0.7rem;
  584. padding: 0.5rem;
  585. }
  586. .PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
  587. width: 100%;
  588. }
  589. .PO_galleryContainer .PO_gallery_display {
  590. min-height: 300px;
  591. }
  592. .PO_gallery_box {
  593. padding: 0;
  594. }
  595. .PO_galleryContainer .PO_gallery_box_inner {
  596. padding: 0;
  597. }
  598. .productoverBox.px-6 {
  599. padding: 1rem;
  600. margin: 0;
  601. height: -moz-max-content;
  602. height: max-content;
  603. }
  604. .displayscreenpad .displayscreenpadHeading {
  605. font-size: 4rem;
  606. }
  607. .dualLaptop .dual_des_heading {
  608. font-size: 2rem;
  609. }
  610. .dualLaptop .zeroBMain_des {
  611. padding-right: 0;
  612. }
  613. .dualLaptop .zeroBMain_des .zeroBMain_desP {
  614. font-size: 0.8rem;
  615. max-width: 400px;
  616. }
  617. .controlPanel .controlPanel_des {
  618. top: -110px;
  619. }
  620. .controlPanel .controlPanel_des > h1 {
  621. font-size: 2.5rem;
  622. }
  623. }
  624. @media (max-width: 1000px) {
  625. .dualpassage {
  626. padding-left: 10rem;
  627. padding-right: 2rem;
  628. }
  629. }
  630. @media (max-width: 790px) {
  631. .productOverview .p-6 {
  632. padding: 0;
  633. }
  634. .productOverview .overviewProductFullTitle {
  635. padding: 2rem 0;
  636. font-size: 1rem;
  637. }
  638. .productOverview .overviewProductDes {
  639. font-size: 0.7rem;
  640. }
  641. .displayscreenpad .displayscreenpadHeading {
  642. font-size: 2rem;
  643. }
  644. .dualLaptop .dual_des_heading {
  645. font-size: 1rem;
  646. }
  647. .dualLaptop .zeroBMain_des .zeroBMain_desP {
  648. font-size: 0.7rem;
  649. max-width: 400px;
  650. }
  651. .controlPanel .controlPanel_des > h1 {
  652. font-size: 1.9rem;
  653. }
  654. }
  655. @media (max-width: 670px) {
  656. .zeroBMain_des {
  657. display: none;
  658. }
  659. .mobileAw {
  660. display: block;
  661. }
  662. }
  663. @media only screen and (max-width: 600px) {
  664. .p-6 {
  665. padding: 0;
  666. }
  667. .productoverviewmain .displayscreenpad .displayscreenpadHeading {
  668. font-size: 5rem;
  669. }
  670. .banner_heading_4 {
  671. font-size: 2rem;
  672. }
  673. .displayscreenpad .displayscreenpadHeading {
  674. font-size: 2rem;
  675. }
  676. .displayscreenpad .displayscreenpadMain {
  677. top: 0;
  678. }
  679. .displayscreenpad .twoScreenHeading {
  680. font-size: 1rem;
  681. }
  682. .tableLaptop {
  683. margin-top: 20%;
  684. margin-bottom: 0;
  685. height: -moz-max-content;
  686. height: max-content;
  687. }
  688. .tableLaptop .dual_des_heading {
  689. font-size: 1rem;
  690. }
  691. .tableLaptop .circleTableLaptop {
  692. height: 300px;
  693. }
  694. .tableLaptop .circleTableLaptop .circleTableLaptopTop {
  695. bottom: -3%;
  696. width: 80%;
  697. position: absolute;
  698. top: 50%;
  699. left: 50%;
  700. transform: translate(-50%, 2%);
  701. }
  702. .tableLaptop .circleTableLaptop_Heading {
  703. position: absolute;
  704. top: 4%;
  705. left: 50%;
  706. transform: translate(-50%, 0);
  707. }
  708. .tableLaptop .justTableLaptop {
  709. position: absolute;
  710. width: 86%;
  711. top: 26%;
  712. right: 30px;
  713. z-index: 1;
  714. }
  715. .tableLaptop .circleTableLaptop_text {
  716. position: absolute;
  717. top: 50%;
  718. left: 50%;
  719. transform: translate(-50%, 0%);
  720. }
  721. .trueLifeDisplay {
  722. margin-top: 50px;
  723. }
  724. .trueLifeDisplay .trueLifeDisplay_headingHD > h1,
  725. .trueLifeDisplay .trueLifeDisplay_headingHD .headingLife {
  726. font-size: 2rem;
  727. }
  728. .trueLifeDisplay .trueLifeDisplay_des {
  729. padding: 1rem;
  730. }
  731. .trueLifeDisplay .trueLifeDisplay_des .font_p_Dual {
  732. font-size: 0.9rem;
  733. }
  734. .controlPanel {
  735. margin-top: 3rem;
  736. padding-bottom: 100px;
  737. }
  738. .controlPanel > .p-5 {
  739. padding: 0 !important;
  740. }
  741. .controlPanel .bgControlpanel {
  742. min-height: 85vh;
  743. }
  744. .controlPanel .bgControlpanel .bgControlpaneltabs {
  745. top: 55%;
  746. right: 0;
  747. transform: translateY(-50%);
  748. }
  749. .controlPanel .controlPanel_des {
  750. top: 0%;
  751. width: 100%;
  752. left: 50%;
  753. text-align: center;
  754. transform: translateX(-50%);
  755. margin: 1rem 0;
  756. margin: 1rem 0;
  757. }
  758. .controlPanel .controlPanel_des > h1 {
  759. font-size: 1.2rem;
  760. }
  761. .controlPanel .bgControlpaneltabs {
  762. padding: 0.1rem !important;
  763. padding-top: 3rem !important;
  764. }
  765. .controlPanel .bgControlpaneltabs > .nav-tabs {
  766. padding: 0;
  767. }
  768. .controlPanel .bgControlpaneltabs > ul {
  769. padding: 1rem;
  770. }
  771. .controlPanel .bgControlpaneltabs #tabLaptopContent {
  772. padding: 1rem;
  773. }
  774. .proSection .designedProLaptop_title .designedProLaptop_title_text {
  775. font-size: 2rem;
  776. }
  777. }
  778. .proSection .designedProLaptop_title > .designedProLaptop_title_text {
  779. font-size: 6rem;
  780. }
  781. .proSection .designedProLaptopList > li {
  782. font-size: 2.5rem;
  783. }
  784. @media (max-width: 1200px) {
  785. .proSection .designedProLaptopList > li {
  786. font-size: 1.5rem;
  787. }
  788. }
  789. @media (max-width: 768px) {
  790. .proSection {
  791. padding: 1rem;
  792. }
  793. .proSection .designedProLaptop_title > .designedProLaptop_title_text {
  794. font-size: 4rem;
  795. }
  796. .proSection .designedProLaptopList {
  797. width: 100%;
  798. padding: 1rem;
  799. }
  800. }
  801. @media (max-width: 576px) {
  802. .proSection .designedProLaptop_title > .designedProLaptop_title_text {
  803. font-size: 2.5rem;
  804. }
  805. }
  806. .popupKeyboard {
  807. position: relative;
  808. overflow-x: hidden;
  809. padding-top: 11rem;
  810. }
  811. .popupKeyboard .popupKeyboard_hParent {
  812. position: absolute;
  813. top: 0;
  814. left: 0;
  815. }
  816. .popupKeyboard .popupKeyboard_heading > h1 {
  817. font-size: 9rem;
  818. }
  819. @media (max-width: 1200px) {
  820. .popupKeyboard .popupKeyboard_heading > h1 {
  821. font-size: 5rem;
  822. }
  823. }
  824. @media (max-width: 768px) {
  825. .controlPanel {
  826. padding-bottom: 100px;
  827. }
  828. .popupKeyboard .popupKeyboard_heading {
  829. padding: 1rem;
  830. }
  831. .popupKeyboard .popupKeyboard_heading > h1 {
  832. font-size: 3rem;
  833. }
  834. .popupKeyboard .popupKeyboard_des {
  835. padding: 1rem;
  836. font-size: 1rem;
  837. }
  838. .popupKeyboard .popupKeyboard_hParent {
  839. padding: 1rem;
  840. }
  841. }
  842. @media (max-width: 576px) {
  843. .popupKeyboard .popupKeyboard_heading {
  844. padding: 1rem;
  845. }
  846. .popupKeyboard .popupKeyboard_heading > h1 {
  847. font-size: 2rem;
  848. }
  849. .popupKeyboard .popupKeyboard_des {
  850. padding: 2rem;
  851. padding-top: 0;
  852. font-size: 0.8rem;
  853. }
  854. }
  855. .dragondisplay {
  856. position: relative;
  857. background: rgb(255, 255, 255);
  858. background: linear-gradient(184deg, rgb(255, 255, 255) 4%, rgb(235, 255, 133) 100%);
  859. overflow: hidden;
  860. }
  861. .dragondisplay .dragondisplay_heading {
  862. position: absolute;
  863. bottom: 0;
  864. margin: auto;
  865. width: 100%;
  866. }
  867. .dragondisplay .dragondisplay_heading > h1 {
  868. font-size: 8rem;
  869. text-align: center;
  870. }
  871. .dragondisplay .dragondisplay_des {
  872. max-width: 600px;
  873. position: absolute;
  874. right: 0;
  875. top: 13%;
  876. padding: 4rem;
  877. }
  878. @media (max-width: 1200px) {
  879. .dragondisplay .dragondisplay_heading > h1 {
  880. font-size: 4rem;
  881. text-align: center;
  882. }
  883. }
  884. @media (max-width: 768px) {
  885. .dragondisplay .dragondisplay_heading > h1 {
  886. font-size: 3rem;
  887. text-align: center;
  888. }
  889. }
  890. @media (max-width: 576px) {
  891. .dragondisplay .dragondisplay_heading > h1 {
  892. font-size: 1.5rem;
  893. text-align: center;
  894. }
  895. }
  896. .lensAnwi .box_lens .anwi_BoxLen {
  897. border-radius: 40px;
  898. box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
  899. }
  900. .lensAnwi .box_lens .box_lens_img {
  901. width: 45%;
  902. }
  903. .lensAnwi .box_lens .screenpadLens {
  904. font-size: 1.2rem;
  905. }
  906. .lensAnwi .box_lens .lenHeading {
  907. font-size: 2rem;
  908. }
  909. .lensAnwi .box_lens .anwi_BoxLen {
  910. gap: 10px;
  911. }
  912. @media (max-width: 1400px) {
  913. .lensAnwi .box_lens .lenHeading {
  914. font-size: 1rem;
  915. }
  916. .lensAnwi .box_lens .screenpadLens {
  917. font-size: 0.7rem;
  918. }
  919. }
  920. @media (max-width: 1200px) {
  921. .lensAnwi .row_lensAnwi {
  922. padding: 2rem;
  923. }
  924. .lensAnwi .box_lens .lenHeading {
  925. font-size: 0.7rem;
  926. }
  927. .lensAnwi .box_lens .screenpadLens {
  928. font-size: 0.5rem;
  929. }
  930. }
  931. @media (max-width: 576px) {
  932. .lensAnwi .box_lens .box_lens_img {
  933. width: 25%;
  934. }
  935. .dragondisplay .dragondisplay_heading > h1 {
  936. font-size: 1.5rem;
  937. text-align: center;
  938. }
  939. }
  940. .professinalGrade .professinalGradeImgContainer {
  941. background-image: url("./../../dist/assets/imgs/productoverview/promask.png");
  942. background-color: white;
  943. background-size: cover;
  944. background-repeat: no-repeat;
  945. background-position: center;
  946. }
  947. .professinalGrade .professinalGradeImg {
  948. position: absolute;
  949. top: 50%;
  950. left: 50%;
  951. transform: translate(-50%, -50%);
  952. width: 50%;
  953. }
  954. @media (max-width: 1200px) {
  955. .professinalGrade h1 {
  956. font-size: 3rem;
  957. }
  958. }
  959. @media (max-width: 768px) {
  960. .professinalGrade h1 {
  961. font-size: 2rem;
  962. }
  963. .professinalGrade .font_p_Dual {
  964. font-size: 1rem;
  965. }
  966. }
  967. @media (max-width: 576px) {
  968. .professinalGrade p {
  969. padding-left: 1rem;
  970. }
  971. .professinalGrade .professinalGradeImg {
  972. width: 80%;
  973. }
  974. }
  975. .stunningSound {
  976. position: relative;
  977. padding-top: 15rem;
  978. overflow-x: hidden;
  979. }
  980. .stunningSound .stunningSound_heading {
  981. position: absolute;
  982. z-index: -1;
  983. top: 0;
  984. left: 0;
  985. }
  986. .stunningSound .stunningSound_heading > h1 {
  987. font-size: 10rem;
  988. }
  989. .stunningSound .stunningSound_des {
  990. position: absolute;
  991. right: 0;
  992. top: 30%;
  993. transform: translate(0%, 0%);
  994. max-width: 400px;
  995. }
  996. @media (max-width: 1200px) {
  997. .stunningSound .stunningSound_heading > h1 {
  998. font-size: 7rem;
  999. }
  1000. .stunningSound .stunningSound_des {
  1001. padding-right: 1rem;
  1002. max-width: 300px;
  1003. }
  1004. }
  1005. @media (max-width: 1000px) {
  1006. .stunningSound .stunningSound_heading {
  1007. top: 20%;
  1008. }
  1009. .stunningSound .stunningSound_heading > h1 {
  1010. font-size: 5rem;
  1011. }
  1012. .stunningSound .stunningSound_des {
  1013. top: 40%;
  1014. right: 0;
  1015. }
  1016. }
  1017. @media (max-width: 768px) {
  1018. .stunningSound .stunningSound_heading > h1 {
  1019. font-size: 4rem;
  1020. }
  1021. .stunningSound .stunningSound_des {
  1022. max-width: 270px;
  1023. top: 50%;
  1024. right: 0;
  1025. }
  1026. .stunningSound .stunningSound_des p {
  1027. font-size: 1rem;
  1028. }
  1029. }
  1030. @media (max-width: 576px) {
  1031. .stunningSound {
  1032. padding-top: 1rem;
  1033. }
  1034. .stunningSound .stunningSound_heading {
  1035. top: 15%;
  1036. }
  1037. .stunningSound .stunningSound_heading > h1 {
  1038. font-size: 2rem;
  1039. padding: 2rem;
  1040. }
  1041. .stunningSound .stunningSound_des {
  1042. padding: 2rem;
  1043. top: 25%;
  1044. max-width: 100%;
  1045. left: 0;
  1046. }
  1047. }
  1048. .wifiSection {
  1049. overflow-x: hidden;
  1050. position: relative;
  1051. }
  1052. .wifiSection .wifiSectionDes {
  1053. display: none;
  1054. }
  1055. .wifiSection .textWifiContainer {
  1056. position: relative;
  1057. }
  1058. .wifiSection .textWifiContainer .wifiSection_des {
  1059. max-width: 500px;
  1060. position: absolute;
  1061. right: 0;
  1062. top: -48%;
  1063. width: 100%;
  1064. height: 100%;
  1065. }
  1066. .wifiSection .textWifiContainer .textWifiContainerHeading > h1 {
  1067. font-size: 5rem;
  1068. }
  1069. @media (max-width: 1200px) {
  1070. .wifiSection .textWifiContainer .textWifiContainerHeading > h1 {
  1071. font-size: 5rem;
  1072. }
  1073. }
  1074. @media (max-width: 1000px) {
  1075. .wifiSection .textWifiContainer {
  1076. display: none;
  1077. }
  1078. .wifiSection .wifiSectionDes {
  1079. padding: 2rem;
  1080. display: block;
  1081. }
  1082. .wifiSection .wifiSectionDes .wifiSection_des > p {
  1083. font-size: 1rem;
  1084. }
  1085. }
  1086. .circleTableLaptop_Heading {
  1087. top: 20%;
  1088. }
  1089. .circleTableLaptop_text {
  1090. bottom: 25%;
  1091. }
  1092. .circleTableLaptop_text > div {
  1093. padding: 0px 22%;
  1094. }
  1095. @media (max-width: 1300px) {
  1096. .circleTableLaptop_text {
  1097. bottom: 18%;
  1098. }
  1099. .circleTableLaptop_text > div {
  1100. font-size: 1rem;
  1101. }
  1102. }
  1103. @media (max-width: 1000px) {
  1104. .circleTableLaptop_Heading h1 {
  1105. font-size: 1.5rem;
  1106. }
  1107. .circleTableLaptop_text {
  1108. bottom: 25%;
  1109. }
  1110. .circleTableLaptop_text > div {
  1111. font-size: 0.7rem;
  1112. }
  1113. }
  1114. @media (max-width: 600px) {
  1115. .circleTableLaptop_Heading {
  1116. top: 0;
  1117. }
  1118. .circleTableLaptop_Heading h1 {
  1119. font-size: 1.5rem;
  1120. }
  1121. }
  1122. @media (max-width: 1200px) {
  1123. .proConnectivity h1 {
  1124. font-size: 2.5rem;
  1125. }
  1126. .proConnectivity .font_p_Dual {
  1127. font-size: 1rem;
  1128. }
  1129. }
  1130. @media (max-width: 768px) {
  1131. .proConnectivity h1 {
  1132. font-size: 2rem;
  1133. }
  1134. .proConnectivity .font_p_Dual {
  1135. font-size: 0.7rem;
  1136. }
  1137. }
  1138. @media (max-width: 600px) {
  1139. .proConnectivity .connectivityPso_des {
  1140. padding: 2rem;
  1141. }
  1142. }
  1143. .osPlusSoftware {
  1144. position: relative;
  1145. padding-top: 10rem;
  1146. }
  1147. .osPlusSoftware .osContianer {
  1148. position: absolute;
  1149. top: 5rem;
  1150. left: 50%;
  1151. transform: translateX(-50%);
  1152. }
  1153. .osPlusSoftware .osContianer_des_font {
  1154. font-size: 1.5rem;
  1155. }
  1156. @media (max-width: 1200px) {
  1157. .osPlusSoftware {
  1158. position: relative;
  1159. }
  1160. .osPlusSoftware .osContianerHeading > h1 {
  1161. font-size: 5rem;
  1162. }
  1163. .osPlusSoftware .osContianer_des_font {
  1164. font-size: 1.5rem;
  1165. }
  1166. }
  1167. @media (max-width: 1000px) {
  1168. .osPlusSoftware {
  1169. padding-top: 1rem;
  1170. }
  1171. .osPlusSoftware .osContianer {
  1172. top: 1rem;
  1173. }
  1174. .osPlusSoftware .osContianerHeading > h1 {
  1175. font-size: 2rem;
  1176. text-align: center;
  1177. }
  1178. .osPlusSoftware .osContianer_des_font {
  1179. font-size: 1rem;
  1180. }
  1181. }
  1182. @media (max-width: 768px) {
  1183. .osPlusSoftware .osContianer {
  1184. top: -1rem;
  1185. }
  1186. .osPlusSoftware .osContianerHeading > h1 {
  1187. font-size: 2rem;
  1188. text-align: center;
  1189. }
  1190. .osPlusSoftware .osContianer_des_font {
  1191. font-size: 0.7rem;
  1192. text-align: center;
  1193. }
  1194. }
  1195. .controlPanel {
  1196. margin-top: 10rem;
  1197. padding-bottom: 300px;
  1198. }
  1199. .controlPanel .controlPanel_des {
  1200. position: absolute;
  1201. top: -170px;
  1202. left: 80px;
  1203. }
  1204. .controlPanel .bgControlpanel {
  1205. min-height: 100vh;
  1206. background-color: #ececec;
  1207. border-radius: 157px;
  1208. position: relative;
  1209. }
  1210. .controlPanel .bgControlpanel .bgControlpaneltabs {
  1211. position: absolute;
  1212. top: 100px;
  1213. right: 0;
  1214. }
  1215. .controlPanel .bgControlpanel .bgControlpaneltabs .nav-link:focus-visible,
  1216. .controlPanel .bgControlpanel .bgControlpaneltabs .nav-item:focus-visible {
  1217. outline: none !important;
  1218. }
  1219. .controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs {
  1220. border-bottom: 1px solid;
  1221. margin-bottom: 2rem;
  1222. }
  1223. .controlPanel .bgControlpanel .bgControlpaneltabs .nav-item {
  1224. position: relative;
  1225. border: none;
  1226. }
  1227. .controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link {
  1228. position: relative;
  1229. color: black;
  1230. font-weight: 500;
  1231. }
  1232. .controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active {
  1233. border: none;
  1234. background-color: transparent;
  1235. }
  1236. .controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active::before {
  1237. display: block;
  1238. }
  1239. .controlPanel .bgControlpanel .bgControlpaneltabs .nav-item .nav-link::before {
  1240. content: "";
  1241. position: absolute;
  1242. width: 100%;
  1243. height: 5px;
  1244. bottom: -2px;
  1245. right: 0;
  1246. display: none;
  1247. background-color: black;
  1248. }
  1249. @media (max-width: 768px) {
  1250. .controlPanel {
  1251. padding-bottom: 100px;
  1252. }
  1253. .controlPanel .bgControlpanel {
  1254. min-height: 50vh;
  1255. }
  1256. }
  1257. @media (max-width: 600px) {
  1258. .controlPanel .controlPanel_des {
  1259. width: 100%;
  1260. display: flex;
  1261. flex-direction: column;
  1262. align-items: center;
  1263. justify-content: center;
  1264. left: 50%;
  1265. }
  1266. }
  1267. /* home page */
  1268. /* BUtton */
  1269. .button_dark.btn-dark {
  1270. background-color: #000 !important;
  1271. font-family: "Satoshi", sans-serif;
  1272. }
  1273. .button_dark.btn-dark:hover {
  1274. background-color: #000 !important;
  1275. font-family: "Satoshi", sans-serif;
  1276. opacity: 1 !important;
  1277. }
  1278. /* main-container */
  1279. .home-main-container {
  1280. /* banner */
  1281. }
  1282. .home-main-container #navbar-head {
  1283. /* navbar */
  1284. }
  1285. .home-main-container #navbar-head .navbar-nav .nav-item .nav-link {
  1286. color: #000;
  1287. font-family: "Satoshi", sans-serif;
  1288. }
  1289. .home-main-container .hero-banner {
  1290. background-image: url(../../dist/assets/imgs/Home_new/Home_banner_bg.png);
  1291. background-size: cover;
  1292. background-repeat: no-repeat;
  1293. background-position: center center;
  1294. }
  1295. .home-main-container .hero-banner .banner-main-container .carousel-indicators .carousel_btn.active {
  1296. color: #000;
  1297. }
  1298. .home-main-container .hero-banner .banner-main-container .owl-dots {
  1299. text-align: center;
  1300. margin-top: -15px !important;
  1301. }
  1302. .home-main-container .hero-banner .banner-main-container .owl-dots .owl-dot span {
  1303. height: 5px !important;
  1304. width: 35px !important;
  1305. background: #fff;
  1306. }
  1307. .home-main-container .hero-banner .banner-main-container .owl-dots .owl-dot:hover span {
  1308. background: #000;
  1309. }
  1310. .home-main-container .hero-banner .banner-main-container .owl-dots .owl-dot.active span {
  1311. background: #000;
  1312. }
  1313. .home-main-container .ad_banner .card {
  1314. background: url(../../dist/assets/imgs/Home_new/Home_banner_bg.png);
  1315. }
  1316. .home-main-container .Explore_fyro_container {
  1317. background-color: #000;
  1318. }
  1319. .home-main-container .Explore_fyro_container .Explore_fyro_products_main_container .Fyro_main_card {
  1320. background: url(../../dist/assets/imgs/Home_new/Explore_Fyro_bg.png);
  1321. }
  1322. .home-main-container .Explore_fyro_container .Explore_fyro_products_main_container .Fyro_main_card .rtxA_200 {
  1323. background-color: #FFDAD4;
  1324. }
  1325. .home-main-container .accessories_main_container .nvme_m_2 {
  1326. background: #f2f2f2;
  1327. }
  1328. .home-main-container .accessories_main_container .ora_series {
  1329. background: #ffeea9;
  1330. }
  1331. .home-main-container .accessories_main_container .keyboard_mouse {
  1332. background: #06777c;
  1333. }
  1334. .home-main-container .zeno_steamlined_section {
  1335. background-color: #000;
  1336. }
  1337. .home-main-container .zeno_steamlined_section .zeno_logo img {
  1338. width: 150px;
  1339. }
  1340. .home-main-container .zeno_steamlined_section .zeno_products_main_container .Two_four_inch_Card {
  1341. /* background: radial-gradient(#54aff6, #26549A); */
  1342. width: 90%;
  1343. }
  1344. .home-main-container .zeno_steamlined_section .zeno_products_main_container .zeno_sleekbook_1 {
  1345. /* background: radial-gradient(#FFEFAB, #FFDB45); */
  1346. }
  1347. .home-main-container .zeno_steamlined_section .zeno_products_main_container .zeno_sleekbook_2 {
  1348. /* background: radial-gradient(#FFFFFF, #CCCCCC); */
  1349. }
  1350. @media (min-width: 1900px) {
  1351. .hero-banner {
  1352. background-size: 100% 100%;
  1353. }
  1354. }
  1355. @media (min-width: 1024px) {
  1356. .banner_heading_4 {
  1357. font-size: 2rem;
  1358. }
  1359. }
  1360. @media (min-width: 278px) and (max-width: 767px) {
  1361. .hero-banner {
  1362. height: 100vh;
  1363. }
  1364. .carousel-inner .carousel_img {
  1365. height: 100vh;
  1366. }
  1367. .fyro_card {
  1368. padding-top: 0 !important;
  1369. }
  1370. .Two_four_inch_Card {
  1371. margin-left: 0 !important;
  1372. width: 100% !important;
  1373. margin-bottom: 20px;
  1374. }
  1375. .accessories_main_container {
  1376. text-align: center;
  1377. }
  1378. .accessories_main_container .ora_series {
  1379. margin-top: 1rem !important;
  1380. }
  1381. .zeno_products_main_container {
  1382. text-align: center;
  1383. }
  1384. .Fyro_main_card {
  1385. text-align: center;
  1386. }
  1387. .ad_banner {
  1388. text-align: center;
  1389. }
  1390. .ad_banner .ad_banner_img {
  1391. width: 100% !important;
  1392. }
  1393. .owl-dots {
  1394. text-align: center;
  1395. margin-top: 0 !important;
  1396. }
  1397. .home-main-container h5 {
  1398. font-size: 1rem;
  1399. }
  1400. .home-main-container h6 {
  1401. font-size: 1rem;
  1402. }
  1403. .home-main-container .sec-space-1 {
  1404. margin-top: 40px;
  1405. }
  1406. .home-main-container .sec-space-2 {
  1407. margin-top: 40px;
  1408. }
  1409. .home-main-container .banner-main-container {
  1410. height: 550px;
  1411. display: block !important;
  1412. text-align: center;
  1413. }
  1414. .home-main-container .banner-main-container .col-md-6 {
  1415. padding-top: 7rem;
  1416. }
  1417. .home-main-container .banner-main-container .col-md-6 .button_dark {
  1418. display: none;
  1419. }
  1420. .home-main-container .banner-main-container h1 {
  1421. font-size: 2rem;
  1422. }
  1423. .home-main-container .hero-banner {
  1424. background-position: 0;
  1425. }
  1426. .footer-wrapper .accordion-button {
  1427. font-family: "Satoshi", sans-serif;
  1428. color: white;
  1429. background-color: #000;
  1430. }
  1431. .footer-wrapper .accordion-button:not(.collapsed)::after {
  1432. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  1433. }
  1434. .footer-wrapper .accordion-body {
  1435. font-family: "Satoshi", sans-serif;
  1436. color: white;
  1437. background-color: #000;
  1438. }
  1439. .footer-wrapper .accordion-button.collapsed::after {
  1440. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  1441. }
  1442. .footer-wrapper .footer-sub-content p {
  1443. font-size: 0.85rem;
  1444. }
  1445. }
  1446. .feature-bg-image.animated-feature-img {
  1447. animation: slide 1s ease 0.2s forwards;
  1448. opacity: 0;
  1449. }
  1450. @keyframes slide {
  1451. from {
  1452. opacity: 0;
  1453. }
  1454. to {
  1455. opacity: 1;
  1456. }
  1457. }
  1458. [alt=footer-rocket-img] {
  1459. cursor: pointer;
  1460. width: 70px;
  1461. }
  1462. .partners-img {
  1463. height: 60px;
  1464. }
  1465. @media (min-width: 1800px) {
  1466. .offer-main-sec {
  1467. position: absolute;
  1468. bottom: 40%;
  1469. right: 20%;
  1470. width: 60%;
  1471. }
  1472. }
  1473. .shopping-cart-main-container {
  1474. background-color: #F5FFEA;
  1475. padding-bottom: 50px;
  1476. }
  1477. .shopping-cart-main-container * {
  1478. font-family: "Satoshi", sans-serif;
  1479. }
  1480. .shopping-cart-main-container h6 {
  1481. padding: 10px;
  1482. margin-bottom: 0;
  1483. }
  1484. .shopping-cart-main-container .cart-sec-highlighter .text-muted {
  1485. color: #C5C5C5 !important;
  1486. }
  1487. .shopping-cart-main-container .alert-display-sec {
  1488. z-index: 1;
  1489. }
  1490. .shopping-cart-main-container .alert-display-sec .alert-dismissible {
  1491. background: rgba(255, 255, 255, 0.66);
  1492. }
  1493. .warrenty-sec img {
  1494. width: 40px;
  1495. }
  1496. #footer-head .footer-wrapper.sec-space-1 {
  1497. margin-top: 0;
  1498. }
  1499. @media (max-width: 1300px) {
  1500. .cart-sec-highlighter h5 {
  1501. font-size: 0.8rem;
  1502. }
  1503. }
  1504. @media (max-width: 768px) {
  1505. .cart-sec-highlighter,
  1506. .shopping-cart-details-row-1 {
  1507. display: none !important;
  1508. }
  1509. .buy-together-sec {
  1510. text-align: center;
  1511. }
  1512. .buy-together-sec .row {
  1513. padding: 10px;
  1514. }
  1515. .mobile-cart-img img {
  1516. width: 200px;
  1517. }
  1518. }
  1519. .clipPathSectionCol {
  1520. position: relative;
  1521. }
  1522. .clipPathSectionCol .innerClipPathImg {
  1523. position: absolute;
  1524. top: 12%;
  1525. left: 9%;
  1526. width: 81%;
  1527. }
  1528. .clipPathSectionCol .innerClipPathImgFirstThree {
  1529. position: absolute;
  1530. top: 12%;
  1531. left: 5%;
  1532. width: 81%;
  1533. }
  1534. .clipPathSectionCol .innerClipPathImgFirstFour {
  1535. position: absolute;
  1536. top: 12%;
  1537. left: 5%;
  1538. width: 81%;
  1539. }
  1540. .clipPathSectionCol .innerClipPathImgFirstFour > img {
  1541. transform: scale(0.7);
  1542. }
  1543. .clipPathSectionCol .innerClipPathImgSectionTwo {
  1544. position: absolute;
  1545. top: 50%;
  1546. left: 28%;
  1547. transform: translateY(-50%);
  1548. width: 81%;
  1549. }
  1550. .clipPathSectionCol .innerClipPathImgSectionThree {
  1551. position: absolute;
  1552. top: 50%;
  1553. left: 17%;
  1554. transform: translateY(-50%);
  1555. width: 81%;
  1556. }
  1557. .clipPathSectionCol .innerClipPathImgSectionFour {
  1558. position: absolute;
  1559. top: 50%;
  1560. left: 17%;
  1561. transform: translateY(-50%);
  1562. width: 81%;
  1563. }
  1564. .allinoneLanding {
  1565. position: relative;
  1566. }
  1567. .allinoneLanding #navbar-head * {
  1568. color: white;
  1569. }
  1570. .allinoneLanding .headingAllinOne {
  1571. position: absolute;
  1572. bottom: 10%;
  1573. left: 0;
  1574. }
  1575. .sectionTwoImgAllInone {
  1576. transform: scale(1.4);
  1577. }
  1578. .allinoneDualMarginTop {
  1579. margin-top: 100px;
  1580. }
  1581. .sectionfiveAllinOne .infoContainer {
  1582. position: relative;
  1583. }
  1584. .sectionfiveAllinOne .infoContainer .infoContainerOneText {
  1585. position: absolute;
  1586. top: 20%;
  1587. left: 50%;
  1588. transform: translateX(-50%);
  1589. }
  1590. .sectionfiveAllinOne .infoContainer .infoContainerOneText > h1 {
  1591. font-size: 1.7rem;
  1592. }
  1593. .infoContainerYellow {
  1594. background-color: #FFB518;
  1595. }
  1596. .infoContainerOrange {
  1597. background-color: #E05E00;
  1598. color: white;
  1599. }
  1600. .infoContainerBlue {
  1601. background-color: #461DCF;
  1602. color: white;
  1603. }
  1604. .infoContainer_des {
  1605. font-size: 0.8rem;
  1606. }
  1607. .supportBoxCircle {
  1608. width: 100px;
  1609. height: 100px;
  1610. background-color: black;
  1611. border-radius: 50%;
  1612. }
  1613. .carouselLanding {
  1614. overflow-x: auto;
  1615. display: flex;
  1616. gap: 50px;
  1617. margin-bottom: 4rem;
  1618. }
  1619. .carouselLanding .carouselLandingItem {
  1620. width: 300px;
  1621. }
  1622. .carouselLanding .carouselLandingItem > div {
  1623. border-radius: 25px;
  1624. overflow: hidden;
  1625. }
  1626. .carouselLanding .carouselLandingItem .carouselLandingItemInner {
  1627. position: relative;
  1628. }
  1629. .carouselLanding .carouselLandingItem .carouselLandingItemInner .carouselLandingItemInnerOverlay {
  1630. position: absolute;
  1631. top: 0;
  1632. bottom: 0;
  1633. left: 0;
  1634. right: 0;
  1635. background: rgba(0, 0, 0, 0.453);
  1636. }
  1637. .allinoneslider .carouselLanding {
  1638. position: relative;
  1639. display: flex;
  1640. align-items: center;
  1641. justify-content: center;
  1642. }
  1643. .allinoneslider .owl-nav {
  1644. bottom: 0;
  1645. position: absolute;
  1646. display: none;
  1647. right: 15%;
  1648. border: 1px solid;
  1649. padding: 0.5rem 1.3rem;
  1650. border-radius: 70px;
  1651. }
  1652. .allinoneslider .owl-nav span {
  1653. font-size: 2rem;
  1654. text-align: center;
  1655. }
  1656. .allinoneslider .owl-stage {
  1657. width: 100% !important;
  1658. }
  1659. @media (max-width: 1400px) {
  1660. .allinoneslider .owl-stage {
  1661. width: -moz-max-content !important;
  1662. width: max-content !important;
  1663. }
  1664. }
  1665. @media (max-width: 1300px) {
  1666. .laptopsSection .headinglaptop {
  1667. font-size: 5rem;
  1668. }
  1669. .headinglaptopSub {
  1670. font-size: 1.2rem;
  1671. }
  1672. }
  1673. @media (max-width: 1000px) {
  1674. .laptopsSection .headinglaptop {
  1675. font-size: 3rem;
  1676. }
  1677. .headinglaptopSub {
  1678. font-size: 1.2rem;
  1679. }
  1680. .allinoneDualMarginTop .allinoneDualMarginTop_desContainer {
  1681. padding: 2rem;
  1682. }
  1683. .allinoneDualMarginTop .allinoneDualMarginTop_desContainer h1 {
  1684. font-size: 2rem;
  1685. }
  1686. .allinoneDualMarginTop .allinoneDualMarginTop_desContainer .allinoneDualMarginTop_p {
  1687. font-size: 1rem;
  1688. }
  1689. .allinoneDualMarginTop {
  1690. margin-top: 100px;
  1691. }
  1692. }
  1693. @media (tab-port) {
  1694. .laptopsSection .headinglaptop {
  1695. font-size: 2rem;
  1696. }
  1697. .headinglaptopSub {
  1698. font-size: 1rem;
  1699. }
  1700. }
  1701. @media only screen and (max-width: 600px) {
  1702. .headingAllinOne > h1 {
  1703. font-size: 2rem;
  1704. }
  1705. }
  1706. @media (max-width: 600px) {
  1707. .supTitleSection {
  1708. text-align: center;
  1709. font-size: 1rem;
  1710. }
  1711. .allinoneDualMarginTop .clipPathSectionCol {
  1712. padding-right: 0 !important;
  1713. }
  1714. .headingAllinOne {
  1715. padding-left: 2rem !important;
  1716. padding-right: 2rem !important;
  1717. }
  1718. .headingAllinOne > h1 {
  1719. font-size: 2rem;
  1720. }
  1721. .laptopSectionDesP {
  1722. padding: 1rem;
  1723. width: 100%;
  1724. align-items: center;
  1725. }
  1726. .allinoneDualMarginTop .clipPathSectionCol {
  1727. padding-left: 0 !important;
  1728. }
  1729. .clipPathSectionCol .allinoneDualMarginTop_pContainer {
  1730. padding: 2rem;
  1731. align-items: center;
  1732. }
  1733. .clipPathSectionCol .innerClipPathImgSectionThree {
  1734. top: 30%;
  1735. }
  1736. .clipPathSectionCol .innerClipPathImgSectionFour {
  1737. top: 30%;
  1738. }
  1739. .supportBoxParent {
  1740. padding: 2rem;
  1741. gap: 1.5rem;
  1742. }
  1743. .allinoneDualMarginTop_p {
  1744. text-align: center;
  1745. font-size: 1rem;
  1746. }
  1747. .insightsAdvHeading {
  1748. margin-top: 2rem;
  1749. }
  1750. .insightsAdv {
  1751. width: 100vw;
  1752. padding: 1rem;
  1753. }
  1754. .insightsAdv > ul {
  1755. overflow-x: auto;
  1756. }
  1757. .carouselLanding {
  1758. overflow-x: auto;
  1759. display: block;
  1760. gap: 0;
  1761. margin-bottom: 1rem;
  1762. }
  1763. .carouselLanding .carouselLandingItem {
  1764. width: 100%;
  1765. }
  1766. .carouselLanding .carouselLandingItem > div {
  1767. border-radius: 25px;
  1768. overflow: hidden;
  1769. }
  1770. .carouselLanding .carouselLandingItem .carouselLandingItemInner {
  1771. position: relative;
  1772. }
  1773. .carouselLanding .carouselLandingItem .carouselLandingItemInner .carouselLandingItemInnerOverlay {
  1774. position: absolute;
  1775. top: 0;
  1776. bottom: 0;
  1777. left: 0;
  1778. right: 0;
  1779. background: rgba(0, 0, 0, 0.453);
  1780. }
  1781. .carouselLanding .mt-5C {
  1782. margin-top: 0;
  1783. }
  1784. }
  1785. @media (max-width: 576px) {
  1786. .allinInMargintop {
  1787. margin-top: 100px;
  1788. }
  1789. .content-main-allinone {
  1790. padding: 1rem;
  1791. }
  1792. .scaleSmallAllinone {
  1793. scale: 0.9;
  1794. }
  1795. .allinoneslider .owl-stage {
  1796. width: -moz-max-content !important;
  1797. width: max-content !important;
  1798. }
  1799. }
  1800. @media (max-width: 320px) {
  1801. .laptopsSection .headinglaptopSub {
  1802. text-align: center;
  1803. font-size: 1rem;
  1804. }
  1805. .laptopsSection .laptopSectionDesP {
  1806. gap: 2rem !important;
  1807. }
  1808. .allinoneDualMarginTop .allinoneDualMarginTop_p {
  1809. text-align: center;
  1810. font-size: 1rem;
  1811. }
  1812. .allinoneDualMarginTop .allinoneDualMarginTop_pContainer {
  1813. width: 100%;
  1814. }
  1815. .allinoneDualMarginTop .clipPathSectionCol {
  1816. padding-left: 0 !important;
  1817. padding-right: 0 !important;
  1818. }
  1819. .clipPathSectionCol .innerClipPathImgSectionThree {
  1820. top: 22%;
  1821. }
  1822. .clipPathSectionCol .innerClipPathImgSectionFour {
  1823. top: 22%;
  1824. }
  1825. .clipPathSectionCol .innerClipPathImgFirstFour {
  1826. top: 0;
  1827. }
  1828. .allinoneDualMarginTop {
  1829. margin-top: 100px;
  1830. }
  1831. .allinoneDualMarginTop .innerClipPathImgFirstThree {
  1832. top: 0;
  1833. }
  1834. }
  1835. .animateHeadingLeft, .dualLaptopSlideLeftone {
  1836. transform: translateX(1000%);
  1837. transition: 0.8s ease;
  1838. }
  1839. .addTextanimationLeft {
  1840. transform: translateX(0);
  1841. }
  1842. .animateHeadingRight, .dualLaptopSlideone {
  1843. transform: translateX(-1000%);
  1844. transition: 0.8s ease;
  1845. }
  1846. .addTextanimationRight {
  1847. transform: translateX(0);
  1848. }
  1849. .laptoponanimation, .allinOnepc {
  1850. opacity: 0;
  1851. transition: 0.8s ease;
  1852. }
  1853. .addOpacity {
  1854. opacity: 1;
  1855. }
  1856. .clipPathSectionCol .dualLaptopSlideLeftone {
  1857. transform: translate(1000%, -50%);
  1858. transition: 0.8s ease;
  1859. }
  1860. .clipPathSectionCol .dualLaptopSlideLeftoneLeft {
  1861. transform: translate(0, -50%);
  1862. }
  1863. .cpuSlideLeftone {
  1864. transform: translateX(-1000%);
  1865. transition: 0.8s ease;
  1866. }
  1867. .controllerEight {
  1868. transform: translateX(1000%);
  1869. }
  1870. .traslateZero {
  1871. transform: translateX(0);
  1872. }
  1873. .clipPathSectionCol .innerClipPathImgSectionFour.controllerEight {
  1874. transform: translate(1000%, -50%);
  1875. transition: 0.8s ease;
  1876. }
  1877. .clipPathSectionCol .innerClipPathImgSectionFour.traslateZero {
  1878. transform: translate(0, -50%);
  1879. }
  1880. /*
  1881. 0 - 600px: Phone
  1882. 600 - 900px: Tablet portrait
  1883. 900 - 1200px: Tablet landscape
  1884. [1200 - 1800] is where our normal styles apply
  1885. 1800px + : Big desktop
  1886. $breakpoint arguement choices:
  1887. - phone
  1888. - tab-port
  1889. - tab-land
  1890. - big-desktop
  1891. ORDER: Base + typography > general layout + grid > page layout > components
  1892. 1em = 16px
  1893. */
  1894. /* Orbitron */
  1895. @font-face {
  1896. font-family: "Orbitron";
  1897. src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
  1898. font-weight: 400;
  1899. font-style: normal;
  1900. }
  1901. @font-face {
  1902. font-family: "Orbitron";
  1903. src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
  1904. font-weight: 500;
  1905. font-style: normal;
  1906. }
  1907. @font-face {
  1908. font-family: "Orbitron";
  1909. src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
  1910. font-weight: 600;
  1911. font-style: normal;
  1912. }
  1913. @font-face {
  1914. font-family: "Orbitron";
  1915. src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
  1916. font-weight: 700;
  1917. font-style: normal;
  1918. }
  1919. /* Orbitron end */
  1920. /* Satoshi */
  1921. @font-face {
  1922. font-family: "Satoshi";
  1923. src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
  1924. font-weight: 400;
  1925. font-style: normal;
  1926. }
  1927. @font-face {
  1928. font-family: "Satoshi";
  1929. src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
  1930. font-weight: 500;
  1931. font-style: normal;
  1932. }
  1933. @font-face {
  1934. font-family: "Satoshi";
  1935. src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
  1936. font-weight: 700;
  1937. font-style: normal;
  1938. }
  1939. *,
  1940. *::after,
  1941. *::before {
  1942. margin: 0;
  1943. padding: 0;
  1944. box-sizing: inherit;
  1945. font-family: "Orbitron", sans-serif;
  1946. }
  1947. html {
  1948. font-size: 100%;
  1949. }
  1950. body {
  1951. box-sizing: border-box;
  1952. overflow-x: hidden;
  1953. }
  1954. @media only screen and (max-width: 56.25em) {
  1955. body {
  1956. padding: 0;
  1957. }
  1958. }
  1959. .bg-green {
  1960. background-color: #3bb78f;
  1961. background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
  1962. }
  1963. /* button */
  1964. .button_dark {
  1965. -webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
  1966. clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
  1967. padding-right: 1.7rem;
  1968. padding-bottom: 0.6rem;
  1969. padding-top: 0.6rem;
  1970. border-radius: 10px;
  1971. }
  1972. /* navbar */
  1973. #navbar-head {
  1974. position: fixed;
  1975. width: 100%;
  1976. z-index: 9999;
  1977. top: 0;
  1978. }
  1979. #navbar-head .biz-nav-wrapper .navbar-brand img {
  1980. width: 100px;
  1981. }
  1982. #navbar-head .biz-nav-wrapper .dropdown.has-mega-menu {
  1983. position: static !important;
  1984. }
  1985. #navbar-head .biz-nav-wrapper .dropdown-menu .dropdown-items-row {
  1986. width: 100%;
  1987. margin: 0px;
  1988. }
  1989. #navbar-head .navbar-nav {
  1990. gap: 2rem;
  1991. }
  1992. #navbar-head .navbar-nav .nav-item .nav-link {
  1993. color: #000;
  1994. font-family: "Satoshi", sans-serif;
  1995. margin-top: 0.25rem;
  1996. }
  1997. #navbar-head .navbar-nav .dropdown.has-mega-menu:hover > .navbar {
  1998. background-color: #fff;
  1999. }
  2000. #navbar-head .button_dark.btn-dark {
  2001. font-weight: bold;
  2002. }
  2003. #navbar-head .dropdown-menu {
  2004. width: 100%;
  2005. left: 0;
  2006. }
  2007. #navbar-head .dropdown:hover > .dropdown-menu {
  2008. display: block;
  2009. }
  2010. #navbar-head .dropdown-item-img img {
  2011. width: 200px;
  2012. }
  2013. /* footer */
  2014. .footer-wrapper {
  2015. background: black;
  2016. }
  2017. .footer-wrapper .footer-content-main-container {
  2018. background-image: url(../dist/assets/imgs/Home/Footer-pattern.png);
  2019. background-size: contain;
  2020. background-position: right 30px;
  2021. background-repeat: no-repeat;
  2022. }
  2023. .footer-wrapper .last-col-footer {
  2024. width: 20%;
  2025. }
  2026. .footer-wrapper .footer-logo img {
  2027. width: 120px;
  2028. }
  2029. .footer-wrapper li {
  2030. line-height: 2rem;
  2031. font-family: "Satoshi", sans-serif;
  2032. }
  2033. .footer-wrapper .footer-sub-content p {
  2034. line-height: 2rem;
  2035. font-family: "Satoshi", sans-serif;
  2036. }
  2037. .footer-socailImg {
  2038. width: 30px;
  2039. }
  2040. @media (min-width: 1990px) {
  2041. .footer-wrapper .footer-rkt {
  2042. right: 45px !important;
  2043. }
  2044. }
  2045. @media (max-width: 1024px) {
  2046. #navbar-head .navbar-nav {
  2047. gap: 0;
  2048. }
  2049. #navbar-head .navbar-nav .dropdown-menu {
  2050. margin-top: 0;
  2051. }
  2052. .navbar-toggler {
  2053. color: rgba(255, 32, 32, 0);
  2054. }
  2055. .navbar-toggler span {
  2056. display: block;
  2057. background-color: #4f4f4f;
  2058. height: 3px;
  2059. width: 25px;
  2060. margin-top: 5px;
  2061. margin-bottom: 5px;
  2062. position: relative;
  2063. left: 0;
  2064. opacity: 1;
  2065. transition: all 0.35s ease-out;
  2066. transform-origin: center left;
  2067. }
  2068. .navbar-toggler span:nth-child(1) {
  2069. transform: translate(0%, 0%) rotate(0deg);
  2070. margin-top: 0.3em;
  2071. }
  2072. .navbar-toggler span:nth-child(2) {
  2073. opacity: 1;
  2074. }
  2075. .navbar-toggler span:nth-child(3) {
  2076. transform: translate(0%, 0%) rotate(0deg);
  2077. }
  2078. .navbar-toggler:not(.collapsed) span:nth-child(1) {
  2079. transform: translate(15%, -33%) rotate(45deg);
  2080. }
  2081. .navbar-toggler:not(.collapsed) span:nth-child(2) {
  2082. opacity: 0;
  2083. }
  2084. .navbar-toggler:not(.collapsed) span:nth-child(3) {
  2085. transform: translate(15%, 33%) rotate(-45deg);
  2086. }
  2087. }
  2088. @media (max-width: 991px) {
  2089. #navbar-head .accordion-button:not(.collapsed) {
  2090. background-color: #fff;
  2091. color: rgb(0, 0, 0);
  2092. box-shadow: none;
  2093. font-weight: bold;
  2094. }
  2095. #navbar-head .accordion-button {
  2096. font-family: "Satoshi", sans-serif;
  2097. }
  2098. #navbar-head .accordion-body ul li {
  2099. font-size: 1rem;
  2100. font-family: "Satoshi", sans-serif;
  2101. color: #635c5c;
  2102. line-height: 2.5rem;
  2103. }
  2104. #navbar-head .accordion-button:focus {
  2105. box-shadow: none;
  2106. }
  2107. #navbar-head .accordion-button::after {
  2108. background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  2109. transform: scale(0.7) !important;
  2110. }
  2111. #navbar-head .accordion-button:not(.collapsed)::after {
  2112. background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  2113. }
  2114. .delivery-to-sec .d-flex {
  2115. font-size: 0.7rem;
  2116. }
  2117. .delivery-to-sec .button_dark {
  2118. font-size: 0.7rem;
  2119. }
  2120. }
  2121. #footer-head .accordion-item {
  2122. border: 1px solid;
  2123. box-shadow: none;
  2124. }
  2125. #footer-head .accordion-item .accordion-button:not(.collapsed) {
  2126. box-shadow: none !important;
  2127. }
  2128. .footer-socailImg {
  2129. width: 30px;
  2130. }
  2131. .footer-rkt:hover {
  2132. animation: rocketRotate 2s;
  2133. }
  2134. @keyframes rocketRotate {
  2135. from {
  2136. transform: rotate(0);
  2137. }
  2138. to {
  2139. transform: rotate(360deg);
  2140. }
  2141. }
  2142. .mbil-name, .navbar-brand img {
  2143. transition: all 0.2s ease;
  2144. }/*# sourceMappingURL=style.css.map */