Geen omschrijving
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

style.css 47KB

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