Ingen beskrivning
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

main.css 47KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272
  1. /* Orbitron */
  2. @font-face {
  3. font-family: "Orbitron";
  4. src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
  5. font-weight: 400;
  6. font-style: normal;
  7. }
  8. @font-face {
  9. font-family: "Orbitron";
  10. src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
  11. font-weight: 500;
  12. font-style: normal;
  13. }
  14. @font-face {
  15. font-family: "Orbitron";
  16. src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
  17. font-weight: 600;
  18. font-style: normal;
  19. }
  20. @font-face {
  21. font-family: "Orbitron";
  22. src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
  23. font-weight: 700;
  24. font-style: normal;
  25. }
  26. /* Orbitron end */
  27. /* Satoshi */
  28. @font-face {
  29. font-family: "Satoshi";
  30. src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
  31. font-weight: 400;
  32. font-style: normal;
  33. }
  34. @font-face {
  35. font-family: "Satoshi";
  36. src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
  37. font-weight: 500;
  38. font-style: normal;
  39. }
  40. @font-face {
  41. font-family: "Satoshi";
  42. src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
  43. font-weight: 600;
  44. font-style: normal;
  45. }
  46. @font-face {
  47. font-family: "Satoshi";
  48. src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
  49. font-weight: 700;
  50. font-style: normal;
  51. }
  52. /* Satoshi end */
  53. *,
  54. *::after,
  55. *::before {
  56. margin: 0;
  57. padding: 0;
  58. box-sizing: inherit;
  59. font-family: "Satoshi", sans-serif !important;
  60. }
  61. .satoshi_font {
  62. font-family: "Satoshi", sans-serif !important;
  63. }
  64. html {
  65. font-size: 100%;
  66. scroll-behavior: smooth !important;
  67. }
  68. :root {
  69. --main-gradient: radial-gradient(circle, rgba(218, 225, 242, 1) 0%, rgba(217, 228, 244, 1) 49%, rgba(226, 191, 225, 1) 100%);
  70. }
  71. body {
  72. box-sizing: border-box;
  73. overflow-x: hidden;
  74. }
  75. ::-webkit-scrollbar {
  76. width: 6px;
  77. }
  78. ::-webkit-scrollbar-thumb {
  79. background-color: #0A1039;
  80. }
  81. ::-webkit-scrollbar-track {
  82. background: #f1f1f1;
  83. }
  84. .trademark_sup {
  85. font-size: 8px;
  86. }
  87. .copy-right_sup {
  88. font-size: 18px;
  89. top: -0.2em !important;
  90. }
  91. @media only screen and (max-width: 56.25em) {
  92. body {
  93. padding: 0;
  94. }
  95. }
  96. .bg-green {
  97. background-color: #3bb78f;
  98. background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
  99. }
  100. .font-3 {
  101. font-size: 3rem;
  102. }
  103. .font-1_5 {
  104. font-size: 2rem;
  105. }
  106. .font-1_7 {
  107. font-size: 1.7rem;
  108. }
  109. .font-2 {
  110. font-size: 2.2rem;
  111. }
  112. .font-2_2 {
  113. font-size: 2.2rem;
  114. }
  115. .subtitle_1 {
  116. font-size: 1.5rem;
  117. }
  118. .gap-1 {
  119. gap: 0.7rem;
  120. }
  121. .banner_heading_4 {
  122. font-size: 3rem;
  123. }
  124. .padding_top_14 {
  125. padding-top: 14rem;
  126. }
  127. .padding_top_10 {
  128. padding-top: 10rem;
  129. }
  130. .p-6 {
  131. padding: 5rem;
  132. }
  133. .vh_60 {
  134. height: 60vh;
  135. }
  136. .vh-77 {
  137. height: 77vh;
  138. }
  139. .vh-85 {
  140. height: 85vh;
  141. }
  142. .vh-15 {
  143. height: 15vh;
  144. }
  145. .fw-600 {
  146. font-weight: 600;
  147. }
  148. .fw-700 {
  149. font-weight: 700;
  150. }
  151. .h-200p {
  152. height: 200px;
  153. }
  154. /* button */
  155. .button_dark {
  156. clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
  157. padding-right: 1.7rem;
  158. padding-bottom: 0.6rem;
  159. padding-top: 0.6rem;
  160. border-radius: 10px;
  161. }
  162. /* footer */
  163. .footer-wrapper li {
  164. line-height: 2rem;
  165. }
  166. /* -----------------------------productPages----------------------------------- */
  167. .font-weight-500 {
  168. font-weight: 500;
  169. }
  170. .font-weight-600 {
  171. font-weight: 600;
  172. }
  173. .font-weight-lighter {
  174. font-weight: lighter;
  175. }
  176. .product_page,
  177. .all_in_pg {
  178. background-color: #f8f4fc;
  179. }
  180. .product_head {
  181. font-size: 2rem;
  182. font-weight: 600;
  183. }
  184. .small_content {
  185. font-size: 0.7rem;
  186. }
  187. .product_details ul li {
  188. padding: 20px 31px 0px 20px;
  189. font-family: "Satoshi", sans-serif;
  190. }
  191. .product_details ul li::marker {
  192. content: '✓';
  193. font-weight: 600;
  194. }
  195. .product_heading {
  196. font-size: 1.5rem;
  197. }
  198. .product_page section,
  199. .all_in_pg section.product_view {
  200. padding-top: 50px;
  201. }
  202. .cookieAcceptBar {
  203. display: none;
  204. position: fixed;
  205. bottom: 0px;
  206. /* left: 0; */
  207. width: 100%;
  208. max-width: 20%;
  209. right: 0;
  210. background-color: #000000bd;
  211. color: #fff;
  212. padding: 5px 25px;
  213. z-index: 99999;
  214. }
  215. .cookieAcceptBar p {
  216. font-size: 14px;
  217. }
  218. #btnAcceptCookiePolicy {
  219. font-size: 0.8rem;
  220. }
  221. span.transform_text {
  222. position: absolute;
  223. left: -266px;
  224. top: 40%;
  225. font-size: 84px;
  226. transform: rotate(-90deg);
  227. /* transform: translate3d(-50%, -50%, 0); */
  228. -webkit-text-fill-color: transparent;
  229. -webkit-text-stroke: 1px rgb(200 199 199);
  230. -moz-text-fill-color: transparent;
  231. font-family: "Orbitron", sans-serif !important;
  232. }
  233. .zeno_sleekbook_2 {
  234. margin-top: 30px;
  235. }
  236. span.transform_fyro_text {
  237. position: absolute;
  238. left: -214px;
  239. /* top: 142%; */
  240. margin-top: 230px;
  241. font-size: 73px;
  242. transform: rotate(-90deg);
  243. /* transform: translate3d(-50%, -50%, 0); */
  244. -webkit-text-fill-color: transparent;
  245. -webkit-text-stroke: 1px rgb(200 199 199);
  246. -moz-text-fill-color: transparent;
  247. font-family: "Orbitron", sans-serif !important;
  248. }
  249. .pr-0 {
  250. padding-right: 0px !important;
  251. }
  252. .pl-0 {
  253. padding-left: 0px !important;
  254. }
  255. /* #carousel_item1 {
  256. background-image: url(../../dist/assets/imgs/Navbar/oradesktop-laptop-ram.jpg);
  257. background-size: cover;
  258. background-repeat: no-repeat;
  259. }
  260. #carousel_item2 {
  261. background-image: url(../../dist/assets/imgs/Navbar/Ora-NVMe.jpg);
  262. background-repeat: no-repeat;
  263. background-size: cover;
  264. } */
  265. .wrap-contact100 {
  266. width: 950px;
  267. background: #fff;
  268. overflow: hidden;
  269. display: -webkit-box;
  270. display: -webkit-flex;
  271. display: -moz-box;
  272. display: -ms-flexbox;
  273. display: flex;
  274. flex-wrap: wrap;
  275. align-items: stretch;
  276. flex-direction: row-reverse;
  277. }
  278. .modal-dialog {
  279. max-width: 950px;
  280. padding-top: 150px;
  281. margin: auto;
  282. }
  283. .form-floating {
  284. padding: 5px 0px 5px 0px;
  285. }
  286. #carousel_item1 .item {
  287. padding-top: 43px !important;
  288. }
  289. #carousel_item2 .item {
  290. padding-top: 65px !important;
  291. }
  292. @media (min-width:270px) and (max-width: 376px) {
  293. #carousel_item1 .item {
  294. padding-top: 128px !important;
  295. }
  296. }
  297. @media (min-width:377px) and (max-width:575px) {
  298. #carousel_item1 .item {
  299. padding-top: 110px !important;
  300. }
  301. }
  302. @media only screen and (max-width: 575px) {
  303. .w-sm-75 {
  304. width: 75% !important
  305. }
  306. .w-sm-25 {
  307. width: 25% !important;
  308. }
  309. .w-sm-50 {
  310. width: 50% !important;
  311. }
  312. .w-sm-75 {
  313. width: 75% !important;
  314. }
  315. .product_partner .partners-img {
  316. height: 25px !important;
  317. padding-right: 5px;
  318. }
  319. .label_made img {
  320. height: 35px;
  321. }
  322. .product_details ul {
  323. padding: 0px;
  324. }
  325. .product_page section {
  326. padding-top: 60px;
  327. }
  328. .sec_nav_1,
  329. .sec_nav_2 {
  330. font-size: 0.8rem;
  331. }
  332. /*-------------------------------------- index page------------------------- */
  333. #carousel_item1 {
  334. height: 100%;
  335. }
  336. #carousel_item2 {
  337. height: 100%;
  338. background-size: cover;
  339. }
  340. /* .carousel-inner .carousel_img {
  341. height: 90vh !important;
  342. } */
  343. .home-main-container .hero-banner {
  344. background-position: 0;
  345. }
  346. .home-main-container .banner-main-container .col-md-6 {
  347. padding-top: 0rem !important;
  348. }
  349. .home-main-container .zeno_steamlined_section .zeno_products_main_container .Two_four_inch_Card {
  350. width: 100%;
  351. max-width: 100% !important;
  352. }
  353. .zeno_sleekbook_2 {
  354. margin-top: 0px;
  355. }
  356. .accessories_main_container .nvme_m_2 {
  357. padding: 15px !important;
  358. max-width: 100% !important;
  359. }
  360. .home-main-container .Explore_fyro_container .Explore_fyro_products_main_container .Fyro_main_card .rtxA_200 {
  361. margin-left: 1rem;
  362. margin-right: 1rem
  363. }
  364. .mobile-text-center p.card-text {
  365. margin-left: 12px;
  366. margin-right: 12px;
  367. }
  368. .zeno_section_heading_titleText h1,
  369. .Explore_fyro_heading_titleText h1 {
  370. font-size: 20px;
  371. }
  372. .mark_logo {
  373. top: 14px !important;
  374. left: 14px !important;
  375. width: 100%;
  376. max-width: 16% !important;
  377. }
  378. }
  379. @media only screen and (min-width: 1200px) {
  380. .border-left {
  381. border-left: 1px solid lightgray;
  382. }
  383. .product_partner .partners-img {
  384. height: 35px !important;
  385. padding-right: 5px;
  386. }
  387. .label_made img {
  388. height: 50px;
  389. }
  390. }
  391. @media(min-width:576px) and (max-width:767.98px) {
  392. .product_partner .partners-img {
  393. height: 35px !important;
  394. padding-right: 5px;
  395. }
  396. .label_made img {
  397. height: 50px;
  398. }
  399. /*-------------------------------------- index page------------------------- */
  400. .home-main-container .zeno_steamlined_section .zeno_products_main_container .Two_four_inch_Card {
  401. width: 100%;
  402. max-width: 100% !important;
  403. }
  404. .zeno_sleekbook_2 {
  405. margin-top: 0px;
  406. }
  407. .home-main-container .Explore_fyro_container .Explore_fyro_products_main_container .Fyro_main_card .rtxA_200 {
  408. margin-left: 2rem;
  409. margin-right: 2rem
  410. }
  411. .mobile-text-center h3.card-title {
  412. padding-top: 18px
  413. }
  414. }
  415. @media(min-width:768px) and (max-width:991.98px) {
  416. .product_partner .partners-img {
  417. height: 35px !important;
  418. padding-right: 5px;
  419. }
  420. .label_made img {
  421. height: 50px;
  422. }
  423. .modal-dialog {
  424. max-width: 950px;
  425. padding-top: 200px;
  426. margin: auto;
  427. }
  428. /*-------------------------------------- index page------------------------- */
  429. .banner_heading_4 {
  430. font-size: 1.8rem !important;
  431. }
  432. .home-main-container .zeno_steamlined_section .zeno_products_main_container .Two_four_inch_Card {
  433. width: 100%;
  434. max-width: 100% !important;
  435. }
  436. .zeno_sleekbook_2 {
  437. margin-top: 0px;
  438. }
  439. .accessories_main_container .nvme_m_2 {
  440. padding: 25px !important;
  441. max-width: 100% !important;
  442. }
  443. .accessories_main_container .ora_series .row,
  444. .accessories_main_container .keyboard_mouse .row {
  445. padding: 7px !important;
  446. }
  447. .accessories_main_container .ora_series .row .col-md-6.py-lg-4,
  448. .accessories_main_container .keyboard_mouse .row .col-md-6.py-lg-4 {
  449. padding-top: 0px !important;
  450. padding-bottom: 0px !important;
  451. }
  452. #carousel_item2 .item {
  453. padding-top: 48px !important;
  454. }
  455. #carousel_item1 .item {
  456. padding-top: 74px !important;
  457. }
  458. }
  459. @media(min-width:992px) and (max-width:1199.98px) {
  460. .product_partner .partners-img {
  461. height: 35px !important;
  462. padding-right: 5px;
  463. }
  464. .label_made img {
  465. height: 50px;
  466. }
  467. #carousel_item2 .item {
  468. padding-top: 73px !important;
  469. }
  470. .modal-dialog {
  471. max-width: 950px;
  472. padding-top: 230px;
  473. margin: auto;
  474. }
  475. }
  476. @media(min-width:1200px) {
  477. .w-lg-100 {
  478. width: 100% !important;
  479. }
  480. .modal-dialog {
  481. max-width: 950px;
  482. padding-top: 263px;
  483. margin: auto;
  484. }
  485. .text-lg-dark {
  486. color: #212529 !important;
  487. }
  488. .w-lg-25 {
  489. width: 25% !important;
  490. }
  491. .w-lg-50 {
  492. width: 50% !important;
  493. }
  494. .w-lg-75 {
  495. width: 75% !important;
  496. }
  497. .bg-lg-white {
  498. background: #fff !important;
  499. }
  500. }
  501. @media(min-width:1204px) and (max-width:1399px) {
  502. .Two_four_inch_Card .card-body {
  503. padding-top: 20px !important;
  504. padding-bottom: 20px !important;
  505. }
  506. .zeno_sleekbook_1 .card-body div,
  507. .zeno_sleekbook_2 .card-body div {
  508. padding: 0px !important;
  509. }
  510. span.transform_text {
  511. position: absolute;
  512. left: -230px;
  513. top: 40%;
  514. font-size: 75px;
  515. transform: rotate(-90deg);
  516. /* transform: translate3d(-50%, -50%, 0); */
  517. -webkit-text-fill-color: transparent;
  518. -webkit-text-stroke: 1px rgb(200 199 199);
  519. -moz-text-fill-color: transparent;
  520. }
  521. .accessories_main_container .nvme_m_2 {
  522. padding: 25px !important;
  523. }
  524. .accessories_main_container .ora_series .row,
  525. .accessories_main_container .keyboard_mouse .row {
  526. padding: 16px !important;
  527. }
  528. .accessories_main_container .ora_series .row .col-md-6.py-lg-4,
  529. .accessories_main_container .keyboard_mouse .row .col-md-6.py-lg-4 {
  530. padding-top: 20px !important;
  531. padding-bottom: 20px !important;
  532. }
  533. #carousel_item1 .item {
  534. padding-top: 6px !important;
  535. }
  536. span.transform_fyro_text {
  537. position: absolute;
  538. left: -225px;
  539. /* top: 142%; */
  540. margin-top: 290px;
  541. font-size: 75px;
  542. transform: rotate(-90deg);
  543. /* transform: translate3d(-50%, -50%, 0); */
  544. -webkit-text-fill-color: transparent;
  545. -webkit-text-stroke: 1px rgb(200 199 199);
  546. -moz-text-fill-color: transparent;
  547. }
  548. #carousel_item2 .item {
  549. padding-top: 6px !important;
  550. }
  551. }
  552. @media(min-width:1000px) and (max-width:1203px) {
  553. .Two_four_inch_Card .card-body {
  554. padding-top: 62px !important;
  555. padding-bottom: 42px !important;
  556. }
  557. .zeno_sleekbook_1 .card-body div,
  558. .zeno_sleekbook_2 .card-body div {
  559. padding: 0px !important;
  560. }
  561. span.transform_text {
  562. position: absolute;
  563. left: -250px;
  564. top: 40%;
  565. font-size: 78px;
  566. transform: rotate(-90deg);
  567. /* transform: translate3d(-50%, -50%, 0); */
  568. -webkit-text-fill-color: transparent;
  569. -webkit-text-stroke: 1px rgb(200 199 199);
  570. -moz-text-fill-color: transparent;
  571. }
  572. .accessories_main_container .nvme_m_2 {
  573. padding: 25px !important;
  574. }
  575. .accessories_main_container .ora_series .row,
  576. .accessories_main_container .keyboard_mouse .row {
  577. padding: 10px !important;
  578. }
  579. .accessories_main_container .ora_series .row .col-md-6.py-lg-4,
  580. .accessories_main_container .keyboard_mouse .row .col-md-6.py-lg-4 {
  581. padding-top: 9px !important;
  582. padding-bottom: 9px !important;
  583. }
  584. }
  585. @media(min-width:1290px) and (max-width:1990px) {
  586. span.transform_text {
  587. position: absolute;
  588. left: -273px;
  589. top: 39%;
  590. font-size: 87px;
  591. }
  592. span.transform_fyro_text {
  593. position: absolute;
  594. left: -225px;
  595. margin-top: 217px;
  596. font-size: 76px;
  597. }
  598. }
  599. .fs-9 {
  600. font-size: 0.9rem;
  601. }
  602. .text-theme-color {
  603. color: #0A1039 !important;
  604. }
  605. .border-bottom-theme {
  606. border-top: 0px !important;
  607. border-right: 0px !important;
  608. border-left: 0px !important;
  609. border-bottom: 1px solid #0A1039 !important;
  610. }
  611. #Login_btn,
  612. #register_btn,
  613. #proceed,
  614. #forgot_password_submit {
  615. border: none;
  616. background-color: #0A1039;
  617. text-transform: uppercase;
  618. font-weight: 600;
  619. padding: 10px 25px;
  620. color: #fff;
  621. font-size: 13px;
  622. }
  623. .products-banner {
  624. padding: 6% 0%;
  625. /* background: #111827; */
  626. background-image: url(../assets/imgs/products-banner-bg.svg);
  627. color: #fff;
  628. background-repeat: no-repeat;
  629. background-size: cover;
  630. }
  631. .prod-tabs-nav {
  632. background: #42454b;
  633. }
  634. .prod-tabs-nav .nav-pills .nav-link.active,
  635. .nav-pills .show>.nav-link {
  636. color: #fff;
  637. background: none;
  638. text-decoration: underline;
  639. }
  640. .main_all_img,
  641. .pre_img {
  642. background: url(../assets/imgs/allin_imgs/img_bg.png);
  643. }
  644. .mark_logo {
  645. top: 30px;
  646. left: 25px;
  647. }
  648. #configure_right_side .main-section .sub_head {
  649. font-size: 25px;
  650. font-weight: 600;
  651. }
  652. #configure_right_side .main-section .suggest_arc {
  653. text-decoration: none;
  654. font-size: 10px;
  655. padding: 0px 3px;
  656. }
  657. #configure_right_side .main-section .small_content {
  658. font-size: 0.9rem;
  659. }
  660. .config_tab_active {
  661. background: #edf1ff;
  662. }
  663. .zeno_section {
  664. background: url(../assets/imgs/allin_imgs/Zzxx.png);
  665. background-size: 100% 100%;
  666. background-repeat: no-repeat;
  667. }
  668. .zeno_section_wrapper .top_bar {
  669. width: 100%;
  670. max-width: 30%;
  671. height: 100%;
  672. max-height: 6px;
  673. }
  674. .zeno_feature {
  675. background: #706c6c85;
  676. border: 2px solid #c1b6b6;
  677. border-radius: 25px;
  678. }
  679. .zeno_feature img {
  680. border: 2px solid #877e7e;
  681. }
  682. .zeno_feature p {
  683. color: #e2e2e2;
  684. font-size: 1.1rem;
  685. font-weight: 500;
  686. }
  687. .h-120p {
  688. height: 120px
  689. }
  690. html,
  691. body {
  692. height: 100%;
  693. }
  694. .w-60 {
  695. width: 60% !important;
  696. }
  697. .zeno_2_sec {
  698. background: url(../assets/imgs/allin_imgs/24inch.png);
  699. background-size: 100% 100%;
  700. background-repeat: no-repeat;
  701. background-position: center;
  702. height: 100% !important;
  703. min-height: 700px;
  704. }
  705. .zeno_3_sec {
  706. background: url(../assets/imgs/allinone24inch/upgradability_bg.png);
  707. background-size: 100% 100%;
  708. background-repeat: no-repeat;
  709. background-position: center;
  710. /* height: 100vh !important; */
  711. /* z-index:10 */
  712. }
  713. .zeno_4_sec {
  714. background: url(../assets/imgs/allin_imgs/banner4.png);
  715. background-size: 100% 100%;
  716. background-repeat: no-repeat;
  717. background-position: center;
  718. height: 100% !important;
  719. min-height: 700px;
  720. }
  721. .zeno_5_sec {
  722. background: url(../assets/imgs/allin_imgs/banner5.png);
  723. background-size: 100% 100%;
  724. background-repeat: no-repeat;
  725. background-position: center;
  726. height: 100% !important;
  727. min-height: 700px;
  728. }
  729. .zeno_6_sec {
  730. background: url(../assets/imgs/allin_imgs/banner6.png);
  731. background-size: 100% 100%;
  732. background-repeat: no-repeat;
  733. background-position: center;
  734. height: 100% !important;
  735. min-height: 700px;
  736. }
  737. .zeno_7_sec {
  738. background: url(../assets/imgs/allin_imgs/banner7.png);
  739. background-size: 100% 100%;
  740. background-repeat: no-repeat;
  741. background-position: center;
  742. height: 100% !important;
  743. min-height: 700px;
  744. }
  745. .zeno_8_sec {
  746. background: url(../assets/imgs/allin_imgs/banner8.png);
  747. background-size: 100% 100%;
  748. background-repeat: no-repeat;
  749. background-position: center;
  750. height: 100% !important;
  751. min-height: 700px;
  752. }
  753. .zeno_9_sec {
  754. background: url(../assets/imgs/allin_imgs/banner9.png);
  755. background-size: 100% 100%;
  756. background-repeat: no-repeat;
  757. background-position: center;
  758. height: 100% !important;
  759. min-height: 700px;
  760. }
  761. .zeno_10_sec {
  762. background: url(../assets/imgs/allin_imgs/banner10.png);
  763. background-size: 100% 100%;
  764. background-repeat: no-repeat;
  765. background-position: center;
  766. height: 100% !important;
  767. min-height: 700px;
  768. }
  769. .zeno_11_sec {
  770. background: url(../assets/imgs/allin_imgs/banner11.png);
  771. background-size: 100% 100%;
  772. background-repeat: no-repeat;
  773. background-position: center;
  774. height: 100% !important;
  775. min-height: 700px;
  776. }
  777. .zeno_12_sec {
  778. background: url(../assets/imgs/allin_imgs/banner12.png);
  779. background-size: 100% 100%;
  780. background-repeat: no-repeat;
  781. background-position: center;
  782. height: 100% !important;
  783. min-height: 700px;
  784. }
  785. .zeno_13_sec {
  786. background: url(../assets/imgs/allin_imgs/banner13.png);
  787. background-size: 100% 100%;
  788. background-repeat: no-repeat;
  789. background-position: center;
  790. height: 100% !important;
  791. min-height: 700px;
  792. }
  793. @media(max-width: 575px) {
  794. .zeno_2_sec {
  795. background: url(../assets/imgs/allin_imgs/24inch.png);
  796. background-size: cover;
  797. background-repeat: no-repeat;
  798. background-position: right;
  799. height: 100% !important;
  800. min-height: 400px;
  801. }
  802. .zeno_3_sec {
  803. background: url(../assets/imgs/allinone24inch/upgradability_bg.png);
  804. background-size: 100% 100%;
  805. background-repeat: no-repeat;
  806. background-position: center;
  807. }
  808. .zeno_4_sec {
  809. background: url(../assets/imgs/allin_imgs/banner4.png);
  810. background-size: cover;
  811. background-repeat: no-repeat;
  812. background-position: unset;
  813. height: 100% !important;
  814. min-height: 438px;
  815. }
  816. .zeno_5_mbil_sec {
  817. background: url(../assets/imgs/allin_imgs/vivid-crystal-bg.png);
  818. background-size: cover;
  819. background-repeat: no-repeat;
  820. background-position: right;
  821. height: 100% !important;
  822. min-height: 400px;
  823. }
  824. .zeno_6_mbil_sec {
  825. background: url(../assets/imgs/allin_imgs/high-performance-bg.png);
  826. background-repeat: no-repeat;
  827. height: 100% !important;
  828. background-position: unset;
  829. }
  830. .zeno_7_sec {
  831. background: url(../assets/imgs/allin_imgs/banner7.png);
  832. background-size: 100% 100%;
  833. background-repeat: no-repeat;
  834. background-position: center;
  835. height: 100% !important;
  836. min-height: 700px;
  837. }
  838. .zeno_8_sec {
  839. background: url(../assets/imgs/allin_imgs/banner8.png);
  840. background-size: 100% 100%;
  841. background-repeat: no-repeat;
  842. background-position: center;
  843. height: 100% !important;
  844. min-height: 700px;
  845. }
  846. .zeno_9_sec {
  847. background: url(../assets/imgs/allin_imgs/banner9.png);
  848. background-size: cover;
  849. background-repeat: no-repeat;
  850. background-position: top;
  851. height: 100% !important;
  852. min-height: 400px;
  853. }
  854. .zeno_10_mbil_sec {
  855. background: url(../assets/imgs/allin_imgs/high-performance-bg.png);
  856. background-size: cover;
  857. background-repeat: no-repeat;
  858. background-position: right;
  859. height: 100% !important;
  860. min-height: 400px;
  861. }
  862. .zeno_10_sec {
  863. background-size: contain;
  864. background-position: center;
  865. }
  866. .zeno_11_sec {
  867. background-size: cover;
  868. background-position: center;
  869. }
  870. .zeno_12_sec {
  871. background-size: cover;
  872. background-position: inherit;
  873. }
  874. .zeno_13_sec {
  875. background-size: cover;
  876. background-position: inherit;
  877. }
  878. .zeno_11_mbil_sec {
  879. background: url(../assets/imgs/allin_imgs/support_bg.png);
  880. }
  881. .zeno_12_mbil_sec {
  882. background: url(../assets/imgs/allin_imgs/space-server-bg.png);
  883. }
  884. .zeno_13_mbil_sec {
  885. background: url(../assets/imgs/allin_imgs/professional-bg.png);
  886. }
  887. .warrenty_sec {
  888. bottom: 31% !important;
  889. left: 34px !important;
  890. }
  891. .warrenty_sec img {
  892. width: 100%;
  893. max-width: 90%;
  894. }
  895. .stunning_visuals_mbil_wrapper {
  896. background: url(../assets/imgs/allinone14inch/stunningvisual.png);
  897. background-size: 100% 100%;
  898. background-position: center;
  899. height: 100vh;
  900. }
  901. }
  902. .w-50p {
  903. width: 50px;
  904. }
  905. .w-30p {
  906. width: 30px;
  907. }
  908. .hover-zoom:hover {
  909. transform: scale(1.1);
  910. }
  911. /* PRODUCT PAGE */
  912. #item_search {
  913. position: sticky;
  914. top: 75px;
  915. }
  916. /* END OF PRODUCT PAGE */
  917. /* LOGIN SECTION */
  918. .mainLogin {
  919. margin-top: 10px;
  920. position: relative;
  921. }
  922. .loginContainer {
  923. width: 100%;
  924. height: 90%;
  925. position: relative;
  926. /* margin-top: 100px; */
  927. }
  928. .space-login {
  929. margin: 20px 0;
  930. }
  931. .authBox {
  932. /* margin: 28px auto 0; */
  933. max-width: 400px;
  934. height: 95%;
  935. /* margin-top: 50px; */
  936. box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
  937. }
  938. .authpic {
  939. display: flex;
  940. justify-items: center;
  941. align-items: center;
  942. max-height: 300px;
  943. }
  944. .formitemLogo {
  945. width: 100%;
  946. display: flex;
  947. height: 150px;
  948. }
  949. .authHeading {
  950. font-size: 1.3rem;
  951. font-weight: 600;
  952. }
  953. .formContanerAuth {
  954. padding: 25px;
  955. }
  956. .borderradius-1 {
  957. border-radius: 4px !important;
  958. }
  959. /* END OF lOGIN SECTION */
  960. /* ORDER DETAILS */
  961. .bg-return {
  962. background-color: #f7f0e1 !important;
  963. }
  964. .close_exchange {
  965. bottom: 10px;
  966. }
  967. .text-a-color {
  968. color: #4462d7e8 !important;
  969. }
  970. .text-order-brown {
  971. color: #ffb10b !important;
  972. }
  973. .btn-order-text {
  974. font-size: 1rem !important;
  975. }
  976. .order-summary {
  977. background-color: #f3e2be !important;
  978. }
  979. .fs-7 {
  980. font-size: 0.7rem;
  981. }
  982. @media only screen and (min-width: 280px) and (max-width: 575px) {
  983. .close_exchange {
  984. bottom: -30px;
  985. font-size: 13px !important;
  986. line-height: 20px;
  987. }
  988. .btn-order-text {
  989. font-size: 0.8rem !important;
  990. padding: 3px 8px !important;
  991. margin: 5px 0px !important;
  992. }
  993. .order_details_page .order_img {
  994. width: 100%;
  995. max-width: 60% !important
  996. }
  997. }
  998. /* END OF ORDER DETAILS PAGE */
  999. /* SUPPORT PAGE */
  1000. @media only screen and (min-width: 1440px) {
  1001. #home-banner {
  1002. width: 100%;
  1003. }
  1004. }
  1005. @media only screen and (min-width: 1440px) {
  1006. #home-banner .banner-home--wrapper {
  1007. position: relative;
  1008. width: 100vw;
  1009. }
  1010. }
  1011. @media only screen and (min-width: 1440px) {
  1012. #home-banner .banner-home--wrapper .banner-home--banner {
  1013. overflow: hidden;
  1014. max-height: 750px;
  1015. }
  1016. }
  1017. @media only screen and (min-width: 1440px) {
  1018. #home-banner .banner-home--wrapper .banner-home--banner .img {
  1019. width: 100vw;
  1020. display: block;
  1021. height: 750px;
  1022. object-fit: cover;
  1023. }
  1024. }
  1025. @media only screen and (min-width: 1440px) {
  1026. #home-banner .banner-home--wrapper_upper {
  1027. /* position: absolute; */
  1028. text-align: center;
  1029. /* width: 1440px; */
  1030. top: 110px;
  1031. left: calc(50vw - 720px);
  1032. }
  1033. }
  1034. @media only screen and (min-width: 1440px) {
  1035. #home-banner .banner-home--wrapper_upper__title1 {
  1036. font-size: 48px;
  1037. line-height: 64px;
  1038. margin-bottom: 8px;
  1039. }
  1040. }
  1041. @media only screen and (min-width: 1440px) {
  1042. #home-banner .banner-home--wrapper_upper__title2 {
  1043. font-size: 30px;
  1044. line-height: 40px;
  1045. margin-bottom: 16px;
  1046. }
  1047. }
  1048. @media only screen and (min-width: 1440px) {
  1049. #home-banner .banner-home--wrapper_upper .banner-home--search {
  1050. width: 600px;
  1051. }
  1052. }
  1053. @media only screen and (min-width: 1440px) {
  1054. #home-banner .banner-home--wrapper_upper .banner-home--search .el-pc-input {
  1055. background-color: #fff;
  1056. border-radius: 4px;
  1057. color: #000;
  1058. border: 1px solid rgba(0, 0, 0, .12);
  1059. border-bottom: 0;
  1060. border-bottom-right-radius: 0;
  1061. border-bottom-left-radius: 0;
  1062. }
  1063. }
  1064. .el-input {
  1065. position: relative;
  1066. font-size: 14px;
  1067. display: inline-block;
  1068. width: 100%;
  1069. }
  1070. @media only screen and (min-width: 1440px) {
  1071. #home-banner .banner-home--wrapper_upper .banner-home--search .el-pc-input .el-input__inner {
  1072. color: #000;
  1073. opacity: .6;
  1074. padding-left: 60px;
  1075. padding-right: 60px;
  1076. height: 60px;
  1077. line-height: 60px;
  1078. font-size: 16px;
  1079. border: 0;
  1080. }
  1081. }
  1082. .el-input--prefix .el-input__inner {
  1083. padding-left: 30px;
  1084. }
  1085. .el-input--suffix .el-input__inner {
  1086. padding-right: 30px;
  1087. }
  1088. .el-input__inner {
  1089. -webkit-appearance: none;
  1090. background-color: #fff;
  1091. background-image: none;
  1092. border-radius: 4px;
  1093. border: 1px solid #dcdfe6;
  1094. box-sizing: border-box;
  1095. color: #606266;
  1096. display: inline-block;
  1097. font-size: inherit;
  1098. height: 40px;
  1099. line-height: 40px;
  1100. outline: 0;
  1101. padding: 0 15px;
  1102. transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  1103. width: 100%;
  1104. }
  1105. @media only screen and (max-width: 1439.98px) {
  1106. #home-banner {
  1107. width: 100%;
  1108. }
  1109. #home-banner .banner-home--wrapper {
  1110. position: relative;
  1111. width: 100%;
  1112. }
  1113. #home-banner .banner-home--wrapper .banner-home--banner {
  1114. overflow: hidden;
  1115. max-height: 375px;
  1116. }
  1117. #home-banner .banner-home--wrapper .banner-home--banner .img {
  1118. width: 100vw;
  1119. display: block;
  1120. height: 375px;
  1121. object-fit: cover;
  1122. }
  1123. #home-banner .banner-home--wrapper_upper {
  1124. /* position: absolute; */
  1125. text-align: center;
  1126. top: 48px;
  1127. width: 100%;
  1128. padding: 0 16px;
  1129. box-sizing: border-box;
  1130. }
  1131. #home-banner .banner-home--wrapper_upper__title1 {
  1132. font-size: 22px;
  1133. line-height: 30px;
  1134. margin-bottom: 8px;
  1135. }
  1136. #home-banner .banner-home--wrapper_upper__title2 {
  1137. font-size: 16px;
  1138. line-height: 22px;
  1139. margin-bottom: 16px;
  1140. }
  1141. #home-banner .banner-home--wrapper_upper .banner-home--search .el-pc-input {
  1142. background-color: #fff;
  1143. border-radius: 4px;
  1144. border: 1px solid rgba(0, 0, 0, .12);
  1145. border-bottom: 0;
  1146. border-bottom-right-radius: 0;
  1147. border-bottom-left-radius: 0;
  1148. }
  1149. #home-banner .banner-home--wrapper_upper .banner-home--search .el-pc-input .el-input__inner {
  1150. color: #000;
  1151. opacity: .6;
  1152. height: 40px;
  1153. line-height: 40px;
  1154. padding: 8px 72px 8px 16px;
  1155. font-size: 16px;
  1156. border: 0;
  1157. }
  1158. /* we help */
  1159. #home-help .home-help--wrapper {
  1160. width: 100%;
  1161. padding: 40px 0;
  1162. box-sizing: border-box;
  1163. }
  1164. #home-help .home-help--wrapper_content {
  1165. width: 100%;
  1166. margin: 0 auto;
  1167. padding: 0 20px;
  1168. text-align: center;
  1169. }
  1170. #home-help .home-help--wrapper_content-title {
  1171. font-size: 22px;
  1172. line-height: 32px;
  1173. margin-bottom: 12px;
  1174. font-family: satoshi, sans-serif;
  1175. }
  1176. #home-help .home-help--wrapper_content-items .grow-1 .grow-width,
  1177. #home-help .home-help--wrapper_content-items .grow-2 .grow-width {
  1178. display: -ms-flexbox;
  1179. display: flex;
  1180. padding: 20px 0;
  1181. border-bottom: 1px solid rgba(0, 0, 0, .12);
  1182. -ms-flex-direction: row-reverse;
  1183. flex-direction: row-reverse;
  1184. }
  1185. #home-help .home-help--wrapper_content-items .grow-1 .grow-width .icon,
  1186. #home-help .home-help--wrapper_content-items .grow-2 .grow-width .icon {
  1187. display: block;
  1188. width: 40px;
  1189. height: 40px;
  1190. }
  1191. #home-help .home-help--wrapper_content-items .grow-1 .grow-width .content,
  1192. #home-help .home-help--wrapper_content-items .grow-2 .grow-width .content {
  1193. -ms-flex: 1;
  1194. flex: 1;
  1195. text-align: left;
  1196. margin-right: 60px;
  1197. }
  1198. #home-help .home-help--wrapper_content-items .grow-1 .grow-width .content .item_title,
  1199. #home-help .home-help--wrapper_content-items .grow-2 .grow-width .content .item_title {
  1200. font-size: 16px;
  1201. line-height: 22px;
  1202. margin-bottom: 12px;
  1203. font-family: OnePlus Sans, MYingHei W7, Medium-65, Microsoft Yahei, sans-serif;
  1204. }
  1205. #home-help .home-help--wrapper_content-items .grow-1 .grow-width .content .item_dec,
  1206. #home-help .home-help--wrapper_content-items .grow-2 .grow-width .content .item_dec {
  1207. font-size: 14px;
  1208. line-height: 18px;
  1209. opacity: .78;
  1210. }
  1211. }
  1212. @media only screen and (min-width: 1440px) {
  1213. #home-help .home-help--wrapper {
  1214. width: 100%;
  1215. padding: 80px 0;
  1216. box-sizing: border-box;
  1217. /* background: #f9f9f9; */
  1218. }
  1219. }
  1220. @media only screen and (min-width: 1440px) {
  1221. #home-help .home-help--wrapper_content {
  1222. width: 1170px;
  1223. margin: 0 auto;
  1224. text-align: center;
  1225. }
  1226. }
  1227. @media only screen and (min-width: 1440px) {
  1228. #home-help .home-help--wrapper_content-title {
  1229. font-size: 36px;
  1230. line-height: 48px;
  1231. margin-bottom: 80px;
  1232. }
  1233. }
  1234. @media only screen and (min-width: 1440px) {
  1235. #home-help .home-help--wrapper_content-items {
  1236. display: -ms-flexbox;
  1237. display: flex;
  1238. -ms-flex-wrap: wrap;
  1239. flex-wrap: wrap;
  1240. margin-right: -2%;
  1241. }
  1242. }
  1243. @media only screen and (min-width: 1440px) {
  1244. #home-help .home-help--wrapper_content-items .grow-1,
  1245. #home-help .home-help--wrapper_content-items .grow-2 {
  1246. margin-bottom: 2%;
  1247. margin-right: 2%;
  1248. background: #fff;
  1249. cursor: pointer;
  1250. transition: .2s;
  1251. }
  1252. }
  1253. @media only screen and (min-width: 1440px) {
  1254. #home-help .home-help--wrapper_content-items .grow-1 {
  1255. width: 23%;
  1256. }
  1257. }
  1258. @media only screen and (min-width: 1440px) {
  1259. #home-help .home-help--wrapper_content-items .grow-1 .grow-width,
  1260. #home-help .home-help--wrapper_content-items .grow-2 .grow-width {
  1261. text-align: center;
  1262. margin: 0 auto;
  1263. padding: 20px 20px 48px 20px;
  1264. height: 100%;
  1265. }
  1266. }
  1267. @media only screen and (min-width: 1440px) {
  1268. #home-help .home-help--wrapper_content-items .grow-1 .grow-width .icon,
  1269. #home-help .home-help--wrapper_content-items .grow-2 .grow-width .icon {
  1270. display: block;
  1271. width: 100px;
  1272. padding: 44px 0 64px 0;
  1273. margin: 0 auto;
  1274. }
  1275. }
  1276. @media only screen and (min-width: 1440px) {
  1277. #home-help .home-help--wrapper_content-items .grow-1 .grow-width .content .item_title,
  1278. #home-help .home-help--wrapper_content-items .grow-2 .grow-width .content .item_title {
  1279. font-size: 24px;
  1280. line-height: 32px;
  1281. margin-bottom: 12px;
  1282. }
  1283. }
  1284. @media only screen and (min-width: 1440px) {
  1285. #home-help .home-help--wrapper_content-items .grow-1 .grow-width .content .item_dec,
  1286. #home-help .home-help--wrapper_content-items .grow-2 .grow-width .content .item_dec {
  1287. font-size: 14px;
  1288. line-height: 18px;
  1289. opacity: .78;
  1290. }
  1291. }
  1292. @media only screen and (min-width: 1440px) {
  1293. #home-help .home-help--wrapper_content-items .grow-1:hover,
  1294. #home-help .home-help--wrapper_content-items .grow-2:hover {
  1295. transform: translateY(-10px);
  1296. box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
  1297. }
  1298. }
  1299. /* END OF SUPPORT PAGE */
  1300. /* new styles */
  1301. #graphene_tech {
  1302. background: url(../assets/imgs/allin_imgs/graphene_tech.png);
  1303. background-repeat: no-repeat;
  1304. background-size: cover;
  1305. }
  1306. #Fyro_main_card {
  1307. /* background: url(.././dist/assets/imgs/Home_new/Explore_Fyro_bg.png); */
  1308. background: url(../assets/imgs/Home_new/Explore_Fyro_bg.png);
  1309. background-repeat: no-repeat;
  1310. background-size: cover;
  1311. }
  1312. span.transform_text1 {
  1313. position: absolute;
  1314. transform: rotate(-90deg);
  1315. -webkit-text-fill-color: transparent;
  1316. -webkit-text-stroke: 1px rgb(200 199 199);
  1317. left: -290px;
  1318. top: 56%;
  1319. font-size: 44px;
  1320. font-family: "Orbitron", sans-serif !important;
  1321. }
  1322. .gap-two-half {
  1323. gap: 2rem !important;
  1324. }
  1325. span.transform_text_1 {
  1326. position: absolute;
  1327. transform: rotate(-90deg);
  1328. -webkit-text-fill-color: transparent;
  1329. -webkit-text-stroke: 1px #707070;
  1330. left: -349px;
  1331. top: 39%;
  1332. font-size: 90px;
  1333. font-family: "Orbitron", sans-serif !important;
  1334. }
  1335. span.transform_text_2 {
  1336. position: absolute;
  1337. transform: rotate(-90deg);
  1338. -webkit-text-fill-color: transparent;
  1339. -webkit-text-stroke: 1px #707070;
  1340. left: -361px;
  1341. top: 39%;
  1342. font-size: 90px;
  1343. font-family: "Orbitron", sans-serif !important;
  1344. }
  1345. .w-65 {
  1346. width: 67% !important;
  1347. }
  1348. span.transform_text2 {
  1349. position: absolute;
  1350. transform: rotate(-90deg);
  1351. -webkit-text-fill-color: transparent;
  1352. -webkit-text-stroke: 1px #707070;
  1353. left: -225px;
  1354. top: 59%;
  1355. font-size: 64px;
  1356. font-family: "Orbitron", sans-serif !important;
  1357. }
  1358. span.transform_text3 {
  1359. position: absolute;
  1360. transform: rotate(-90deg);
  1361. -webkit-text-fill-color: transparent;
  1362. -webkit-text-stroke: 1px #707070;
  1363. left: -225px;
  1364. top: 57%;
  1365. font-size: 64px;
  1366. font-family: "Orbitron", sans-serif !important;
  1367. }
  1368. #innovation_section {
  1369. background-image: linear-gradient(45deg, hsl(220deg 52% 91%) 0%, hsl(229deg 48% 90%) 8%, hsl(243deg 42% 90%) 17%, hsl(260deg 39% 88%) 25%, hsl(272deg 43% 86%) 33%, hsl(285deg 44% 84%) 42%, hsl(300deg 43% 82%) 50%, hsl(300deg 43% 82%) 58%, hsl(300deg 43% 82%) 67%, hsl(300deg 43% 82%) 75%, hsl(293deg 40% 83%) 83%, hsl(286deg 36% 84%) 92%, hsl(280deg 31% 85%) 100%);
  1370. }
  1371. /* #ora_products{
  1372. background: #eef0f3;
  1373. background: var(--main-gradient);
  1374. background-repeat: no-repeat;
  1375. background-size: cover;
  1376. } */
  1377. /* #laptop_memory_sec{
  1378. background: var(--main-gradient);
  1379. background-repeat: no-repeat;
  1380. background-size: cover;
  1381. } */
  1382. /* #graphene_section{
  1383. background: url(../assets/imgs/allin_imgs/section_bg.png);
  1384. background-repeat: no-repeat;
  1385. background-size: cover;
  1386. }
  1387. */
  1388. #desktop_memory_sec {
  1389. background: radial-gradient(#54aff6, #26549A);
  1390. background-repeat: no-repeat;
  1391. background-size: cover;
  1392. }
  1393. @media only screen and (min-width: 1200px) and (max-width: 1360px) {
  1394. .transform_text1,
  1395. .transform_text2 {
  1396. display: none;
  1397. }
  1398. }
  1399. #min_image {
  1400. display: none;
  1401. }
  1402. @media only screen and (min-width: 1921px) and (max-width: 2930px) {
  1403. /* #carouselExampleAutoplaying{
  1404. display: none;
  1405. }
  1406. #min_image{
  1407. display: block;
  1408. padding-top:68px;
  1409. } */
  1410. #home_banner {
  1411. background: #000;
  1412. }
  1413. .banner-main-container {
  1414. max-width: 1200px;
  1415. margin: auto;
  1416. }
  1417. }
  1418. .bg-gradient-anwi {
  1419. /* background: linear-gradient(112.1deg, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%); */
  1420. background: linear-gradient(112.1deg, rgb(63, 76, 119) -14.8%, rgb(32, 38, 57) 100.4%);
  1421. }
  1422. .bg-gradient-anwi.btn:hover {
  1423. /* background: linear-gradient(112.1deg, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%); */
  1424. background: linear-gradient(112.1deg, rgb(32, 38, 57) -14.8%, rgb(63, 76, 119) 100.48%);
  1425. }
  1426. .bg-gradient-violet {
  1427. /* background: linear-gradient(90deg, rgba(230,242,244,1) 6%, rgba(236,228,220,1) 100%);
  1428. */
  1429. /* background:url(../assets/imgs/login_bg.png);*/
  1430. background: rgb(218, 225, 242);
  1431. background: var(--main-gradient);
  1432. background-size: cover;
  1433. background-repeat: no-repeat;
  1434. }
  1435. @media only screen and (min-width: 769px) and (max-width: 1199px) {
  1436. span.transform_text2 {
  1437. position: absolute;
  1438. transform: rotate(-90deg);
  1439. -webkit-text-fill-color: transparent;
  1440. -webkit-text-stroke: 1px rgb(200 199 199);
  1441. left: -151px;
  1442. top: 55%;
  1443. font-size: 43px;
  1444. }
  1445. }
  1446. /* end new styles */
  1447. /* login verifiacation */
  1448. /* Styles for verification */
  1449. .pswd_info {
  1450. position: absolute;
  1451. top: -160px;
  1452. right: 0;
  1453. width: 250px;
  1454. padding: 10px;
  1455. background: #fefefe;
  1456. font-size: .7rem;
  1457. border-radius: 5px;
  1458. box-shadow: 0 1px 3px #ccc;
  1459. border: 1px solid #ddd;
  1460. display: none;
  1461. }
  1462. .pswd_info::before {
  1463. content: "\25B2";
  1464. position: absolute;
  1465. bottom: -12px;
  1466. left: 45%;
  1467. font-size: 14px;
  1468. line-height: 14px;
  1469. color: #ddd;
  1470. text-shadow: none;
  1471. display: block;
  1472. transform: rotate(180deg);
  1473. }
  1474. .pswd_invalid {
  1475. background: url(images/invalid.png) no-repeat 0 50%;
  1476. padding-left: 22px;
  1477. line-height: 24px;
  1478. color: #ec3f41;
  1479. }
  1480. .pswd_valid {
  1481. background: url(images/valid.png) no-repeat 0 50%;
  1482. padding-left: 22px;
  1483. line-height: 24px;
  1484. color: #3a7d34;
  1485. }
  1486. #toast-container>div {
  1487. opacity: 1 !important;
  1488. color: #000 !important;
  1489. margin-top: 20px !important;
  1490. }
  1491. /* .toast-close-button{
  1492. color:#000 !important;
  1493. }
  1494. .toast-success{
  1495. background: #fff !important;
  1496. }
  1497. .toast-error{
  1498. background: #fff !important;
  1499. } */
  1500. .h-50p {
  1501. height: 50px !important;
  1502. }
  1503. .warranty_row {
  1504. background: url(../assets/imgs/allin_imgs/desktop_bg.png);
  1505. background-size: cover;
  1506. background-position: center center;
  1507. }
  1508. .warranty-card .card {
  1509. background: rgb(22, 62, 96);
  1510. background: linear-gradient(75deg, rgb(56 89 118) 51%, rgb(107 18 111) 89%)
  1511. }
  1512. /*Text neon */
  1513. .neon {
  1514. text-shadow:
  1515. 0 0 0px #fff,
  1516. 0 0 0px #fff,
  1517. 0 0 0px #ff9300,
  1518. 0 0 1px #ff9300,
  1519. 0 0 10px #ff9300,
  1520. 0 0 10px #ff9300,
  1521. 0 0 0px #ff9300;
  1522. }
  1523. /* .neon-orange {
  1524. text-shadow:
  1525. 0 0 0px #fff,
  1526. 0 0 0px #fff,
  1527. 0 0 0px #b2674e,
  1528. 0 0 1px #b2674e,
  1529. 0 0 10px #b2674e,
  1530. 0 0 10px #b2674e,
  1531. 0 0 0px #b2674e;
  1532. }
  1533. .neon-blue {
  1534. text-shadow:
  1535. 0 0 0px #fff,
  1536. 0 0 0px #fff,
  1537. 0 0 0px #3b6ec9,
  1538. 0 0 1px #3b6ec9,
  1539. 0 0 10px #3b6ec9,
  1540. 0 0 10px #3b6ec9,
  1541. 0 0 0px #3b6ec9;
  1542. }
  1543. .neon-purple {
  1544. text-shadow:
  1545. 0 0 0px #fff,
  1546. 0 0 0px #fff,
  1547. 0 0 0px #885bce,
  1548. 0 0 1px #885bce,
  1549. 0 0 10px #885bce,
  1550. 0 0 10px #885bce,
  1551. 0 0 0px #885bce;
  1552. } */
  1553. section.graphene_img_section {
  1554. height: 100vh;
  1555. background-attachment: fixed !important;
  1556. background-repeat: no-repeat !important;
  1557. background-size: cover !important;
  1558. }
  1559. section#graphene_section {
  1560. padding-top: 50px;
  1561. }
  1562. .main-text {
  1563. background: linear-gradient(270deg, #f6940c 50%, #ff9300 50%);
  1564. -webkit-background-clip: text;
  1565. -webkit-text-fill-color: transparent;
  1566. font-size: 40px;
  1567. }
  1568. .item-title {
  1569. font-size: 16px;
  1570. font-weight: 500;
  1571. padding: 20px 0px;
  1572. }
  1573. /*button*/
  1574. .buy-now {
  1575. border-radius: 4px;
  1576. /* background-color: #f4511e; */
  1577. border: none;
  1578. color: #FFFFFF;
  1579. text-align: center;
  1580. padding: 5px 15px;
  1581. width: 120px;
  1582. transition: all 0.5s;
  1583. cursor: pointer;
  1584. margin: auto;
  1585. }
  1586. .butbuy-nowton span {
  1587. cursor: pointer;
  1588. display: inline-block;
  1589. position: relative;
  1590. transition: 0.5s;
  1591. }
  1592. .buy-now span:after {
  1593. content: '\00bb';
  1594. position: absolute;
  1595. opacity: 0;
  1596. top: 0;
  1597. right: 20px;
  1598. transition: 0.5s;
  1599. }
  1600. .buy-now:hover span {
  1601. border-bottom: solid 1px white;
  1602. }
  1603. .buy-now:hover span:after {
  1604. opacity: 1;
  1605. right: 0;
  1606. }
  1607. .buy-now {
  1608. background: #5782ce !important;
  1609. color: white;
  1610. }
  1611. @media (min-width:320px) and (max-width:1198px) {
  1612. section.graphene_img_section {
  1613. height: 200px;
  1614. background-attachment: initial !important;
  1615. background-repeat: no-repeat !important;
  1616. background-size: 100% !important;
  1617. }
  1618. .main-text {
  1619. background: linear-gradient(270deg, #f4a73c 50%, #ff9300 50%);
  1620. -webkit-background-clip: text;
  1621. -webkit-text-fill-color: transparent;
  1622. font-size: 24px;
  1623. }
  1624. }
  1625. .footer-wrapper {
  1626. /* background-image: linear-gradient(145deg,rgb(33,37,41,0.9),rgb(33,37,41,0.9)),url(../assets/imgs/home/h1.jpg); */
  1627. /* background-image: linear-gradient(145deg,#ededed,#ededed); */
  1628. background-image: linear-gradient(145deg, #f9f9f9, #f9f9f9);
  1629. }
  1630. .orangeWrapper {
  1631. padding: 0;
  1632. }
  1633. .card-item-header {
  1634. width: 80%;
  1635. margin: auto;
  1636. margin-top: -90px;
  1637. }
  1638. .row.product_card_section {
  1639. padding-top: 100px;
  1640. }
  1641. .card-header-sub-1,
  1642. .card-header-sub-2,
  1643. .card-header-sub-3 {
  1644. border-radius: 20px;
  1645. height: 180px;
  1646. }
  1647. .card-item-header .card-header-sub-1 {
  1648. background-image: url(../assets/imgs/Home_new/Explore_Fyro_bg.png);
  1649. background-position: center;
  1650. background-size: cover;
  1651. background-repeat: no-repeat;
  1652. }
  1653. .card-item-body h3 a {
  1654. font-size: 24px;
  1655. }
  1656. .product_card_1 .card-item-body:hover h3 a {
  1657. color: #ff9300;
  1658. }
  1659. .product_card_2 .card-item-body:hover h3 a {
  1660. color: #5d87d0;
  1661. }
  1662. .product_card_3 .card-item-body:hover h3 a {
  1663. color: #9973d4;
  1664. }
  1665. .product_card_1 .card-item-body:hover .card_product_footer a {
  1666. color: #ff9300;
  1667. }
  1668. .product_card_2 .card-item-body:hover .card_product_footer a {
  1669. color: #5d87d0;
  1670. }
  1671. .product_card_3 .card-item-body:hover .card_product_footer a {
  1672. color: #9973d4;
  1673. }
  1674. .card-item-body p {
  1675. color: #212529;
  1676. margin-bottom: 1px;
  1677. font-size: 15px;
  1678. }
  1679. .card-item-body {
  1680. padding: 50px;
  1681. height: 320px;
  1682. }
  1683. .shadow:hover {
  1684. box-shadow: rgba(0, 0, 0, 0.15) 10px 1rem 1rem !important;
  1685. }
  1686. .card_product_footer {
  1687. position: absolute;
  1688. bottom: 5px;
  1689. }
  1690. .card_product_footer a {
  1691. font-weight: 500;
  1692. }
  1693. .product_card_1 {
  1694. border: 1px solid rgb(204, 204, 204, 0.1);
  1695. border-radius: 10px;
  1696. background: #8e9eab;
  1697. /* fallback for old browsers */
  1698. background: -webkit-linear-gradient(to right, #f8f8f8, #f8f8f8);
  1699. /* Chrome 10-25, Safari 5.1-6 */
  1700. background: linear-gradient(to right, #f8f8f8, #f8f8f8);
  1701. /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  1702. position: relative;
  1703. }
  1704. .product_card_1:hover img {
  1705. transform: scale(1.1);
  1706. }
  1707. .product_card_2 {
  1708. border: 1px solid rgb(204, 204, 204, 0.1);
  1709. border-radius: 10px;
  1710. background: #8e9eab;
  1711. /* fallback for old browsers */
  1712. background: -webkit-linear-gradient(to right, #f8f8f8, #f8f8f8);
  1713. /* Chrome 10-25, Safari 5.1-6 */
  1714. background: linear-gradient(to right, #f8f8f8, #f8f8f8);
  1715. /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  1716. position: relative;
  1717. }
  1718. .product_card_2:hover img {
  1719. transform: scale(1.2);
  1720. }
  1721. .product_card_2:hover .card-item-footer {
  1722. display: block;
  1723. animation: fadeIn 0.8s;
  1724. }
  1725. .card-item-header .card-header-sub-2 {
  1726. background-image: url(../assets/imgs/allin_imgs/laptop_bg.png);
  1727. background-position: center;
  1728. background-size: cover;
  1729. background-repeat: no-repeat;
  1730. }
  1731. .product_card_3 {
  1732. border: 1px solid rgb(204, 204, 204, 0.1);
  1733. border-radius: 10px;
  1734. background: #8e9eab;
  1735. /* fallback for old browsers */
  1736. background: -webkit-linear-gradient(to right, #f8f8f8, #f8f8f8);
  1737. /* Chrome 10-25, Safari 5.1-6 */
  1738. background: linear-gradient(to right, #f8f8f8, #f8f8f8);
  1739. /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  1740. position: relative;
  1741. }
  1742. .product_card_3:hover img {
  1743. transform: scale(1.2);
  1744. }
  1745. .product_card_3:hover .card-item-footer {
  1746. display: block;
  1747. animation: fadeIn 0.8s;
  1748. }
  1749. .card-item-header .card-header-sub-3 {
  1750. background-image: url(../assets/imgs/allin_imgs/desktop_bg.png);
  1751. background-position: center;
  1752. background-size: cover;
  1753. background-repeat: no-repeat;
  1754. }
  1755. .product_card_section h6 {
  1756. font-size: 14px;
  1757. }
  1758. #pills-tabContent .col-sm-4 {
  1759. margin-top: 100px;
  1760. }
  1761. #pills-tabContent .product_card_section {
  1762. padding-top: 0px;
  1763. }
  1764. .theme-btn {
  1765. position: relative;
  1766. z-index: 2;
  1767. overflow: hidden;
  1768. vertical-align: middle;
  1769. display: inline-block;
  1770. border: none;
  1771. text-transform: capitalize;
  1772. text-align: center;
  1773. background-color: #202639 !important;
  1774. color: white !important;
  1775. font-size: 14px;
  1776. font-weight: 600;
  1777. line-height: 1;
  1778. padding: 20.5px 29px;
  1779. box-shadow: 0px 6px 16px rgba(13, 94, 244, 0.24);
  1780. border-radius: 5px;
  1781. }
  1782. .theme-btn:before {
  1783. content: "";
  1784. position: absolute;
  1785. height: 0%;
  1786. left: 50%;
  1787. top: 50%;
  1788. width: 600%;
  1789. background-color: #142c8e !important;
  1790. -webkit-transform: translateX(-50%) translateY(-50%) rotate(60deg);
  1791. -ms-transform: translateX(-50%) translateY(-50%) rotate(60deg);
  1792. transform: translateX(-50%) translateY(-50%) rotate(60deg);
  1793. z-index: -1;
  1794. -webkit-transition: 0.7s ease;
  1795. transition: 0.7s ease;
  1796. }
  1797. .theme-btn:hover,
  1798. .theme-btn.active {
  1799. color: var(--white-color);
  1800. }
  1801. .or_line {
  1802. width: 100%;
  1803. text-align: center;
  1804. border-bottom: 1px solid #ccc;
  1805. line-height: 0.1em;
  1806. line-height: 0 !important;
  1807. font-size: 16px !important;
  1808. }
  1809. .or_line span {
  1810. background: #fff;
  1811. padding: 0 10px;
  1812. }
  1813. .bg-gradient-graphene {
  1814. background: linear-gradient(145deg, rgb(27, 45, 83, 0.9), rgb(10, 19, 34)) !important;
  1815. }
  1816. .bg-gradient-anwi-outline {
  1817. border: solid 2px #142c70 !important;
  1818. color: #142c70 !important;
  1819. background: linear-gradient(145deg, rgb(255, 255, 255, 0.9), rgb(255, 255, 255));
  1820. }
  1821. .bg-gradient-anwi-outline:hover {
  1822. background: linear-gradient(145deg, rgb(27, 45, 83, 0.9), rgb(10, 19, 34)) !important;
  1823. border: solid 2px rgb(10, 19, 34) !important;
  1824. color: white !important;
  1825. }
  1826. .main-menu.menu-lh-1>ul>li>a {
  1827. line-height: 50px;
  1828. }
  1829. .banner-main-container .carousel_img {
  1830. height: 100%;
  1831. min-height: 100%;
  1832. max-height: 100% !important;
  1833. }
  1834. .user_order_details.rounded.mb-3 .text-info {
  1835. color: #0a1322 !important;
  1836. }
  1837. .text-blue {
  1838. color: #0a1322 !important;
  1839. }
  1840. .product_card_section .col-sm-4 {
  1841. margin-top: 100px;
  1842. }
  1843. /* SECTION VERTICAL TABS */
  1844. #experienceTab.nav-pills .nav-link.active {
  1845. color: rgb(3, 41, 90) !important;
  1846. background-color: transparent;
  1847. border-radius: 0px;
  1848. border-left: 3px solid #191e71;
  1849. }
  1850. #experienceTab.nav-pills .nav-link {
  1851. border-radius: 0px;
  1852. line-height: 10px;
  1853. color: rgb(3, 41, 90) !important;
  1854. border-left: 3px solid rgb(222, 222, 222);
  1855. }
  1856. .date-range {
  1857. letter-spacing: 0.01em;
  1858. color: var(--theme-gray);
  1859. }
  1860. /* STUB LINKS */
  1861. a {
  1862. color: var(--theme-gray);
  1863. transition: 0.3s eas-in-out;
  1864. }
  1865. a:hover {
  1866. color: var(--theme-yellow);
  1867. }
  1868. .tab-content img {
  1869. width: 100%;
  1870. min-width: 70px;
  1871. }
  1872. .w-250 {
  1873. width: 250px;
  1874. }
  1875. .w-500 {
  1876. width: 500px;
  1877. }
  1878. .social-icons:hover img {
  1879. transform: scale(1.2);
  1880. }