iframe.css 87 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176
  1. /*========================================
  2. ALL LAYOUTS PART STYLE
  3. =========================================*/
  4. .menu-badge {
  5. font-size: 10px;
  6. padding: 0px 5px;
  7. margin-left: 5px;
  8. line-height: 18px;
  9. border-radius: 3px;
  10. letter-spacing: 0.3px;
  11. display: inline-block;
  12. text-transform: uppercase;
  13. color: var(--white);
  14. background: var(--red);
  15. text-shadow: var(--primary-tshadow);
  16. }
  17. .dropdown-arrow {
  18. position: relative;
  19. padding-right: 18px !important;
  20. }
  21. .dropdown-arrow:hover::before {
  22. color: var(--primary);
  23. }
  24. .dropdown-arrow.root::before {
  25. content: "" !important;
  26. }
  27. .dropdown-link.root::before {
  28. content: "" !important;
  29. }
  30. .dropdown-arrow::before {
  31. position: absolute;
  32. content: "\ea99";
  33. top: 50%;
  34. right: 0px;
  35. font-size: 15px;
  36. line-height: 15px;
  37. color: var(--text);
  38. font-family: IcoFont;
  39. -webkit-transform: translateY(-50%);
  40. transform: translateY(-50%);
  41. transition: all linear .3s;
  42. -webkit-transition: all linear .3s;
  43. -moz-transition: all linear .3s;
  44. -ms-transition: all linear .3s;
  45. -o-transition: all linear .3s;
  46. }
  47. .dropdown-link {
  48. position: relative;
  49. transition: all linear .3s;
  50. -webkit-transition: all linear .3s;
  51. -moz-transition: all linear .3s;
  52. -ms-transition: all linear .3s;
  53. -o-transition: all linear .3s;
  54. }
  55. .dropdown-link:hover {
  56. color: var(--primary);
  57. background: var(--chalk);
  58. }
  59. .dropdown-link:hover::before {
  60. color: var(--primary);
  61. }
  62. .dropdown-link::before {
  63. padding: 15px 20px;
  64. position: absolute;
  65. top: 50%;
  66. right: 18px;
  67. content: "\f054";
  68. font-size: 10px;
  69. font-weight: 900;
  70. font-family: "Font Awesome 5 Free";
  71. -webkit-transform: translateY(-50%);
  72. transform: translateY(-50%);
  73. transition: all linear .3s;
  74. -webkit-transition: all linear .3s;
  75. -moz-transition: all linear .3s;
  76. -ms-transition: all linear .3s;
  77. -o-transition: all linear .3s;
  78. }
  79. .dropdown-link.active {
  80. color: var(--primary);
  81. }
  82. .dropdown-link.active::before {
  83. color: var(--primary);
  84. -webkit-transform: translateY(-50%) rotate(90deg);
  85. transform: translateY(-50%) rotate(90deg);
  86. }
  87. .dropdown-list {
  88. display: none;
  89. padding: 0px 20px;
  90. transition: all linear .3s;
  91. -webkit-transition: all linear .3s;
  92. -moz-transition: all linear .3s;
  93. -ms-transition: all linear .3s;
  94. -o-transition: all linear .3s;
  95. }
  96. .dropdown-list li a {
  97. width: 100%;
  98. font-size: 15px;
  99. line-height: 18px;
  100. border-radius: 8px;
  101. padding: 10px 15px 10px 35px;
  102. color: var(--text);
  103. background: var(--white);
  104. position: relative;
  105. white-space: nowrap;
  106. text-transform: capitalize;
  107. transition: all linear .3s;
  108. -webkit-transition: all linear .3s;
  109. -moz-transition: all linear .3s;
  110. -ms-transition: all linear .3s;
  111. -o-transition: all linear .3s;
  112. }
  113. .dropdown-list li a:hover {
  114. color: var(--primary);
  115. background: var(--chalk);
  116. }
  117. .dropdown-list li a::before {
  118. position: absolute;
  119. top: 50%;
  120. left: 15px;
  121. content: "\f068";
  122. font-size: 10px;
  123. font-weight: 900;
  124. font-family: "Font Awesome 5 Free";
  125. -webkit-transform: translateY(-50%);
  126. transform: translateY(-50%);
  127. }
  128. .dropdown:hover .navbar-position-list {
  129. top: 30px !important;
  130. }
  131. .navbar-position-list {
  132. top: 60px !important;
  133. z-index: 1000 !important;
  134. }
  135. .navbar-position-list li {
  136. margin: 0 !important;
  137. }
  138. .header-top-list li {
  139. margin-left: 0 !important;
  140. /*overflow:hidden;*/
  141. }
  142. .dropdown:hover .dropdown-position-list {
  143. visibility: visible;
  144. opacity: 1;
  145. top: 70px;
  146. }
  147. .dropdown-position-list {
  148. position: absolute;
  149. top: 100px;
  150. left: 0;
  151. z-index: 2;
  152. width: 200px;
  153. height: auto;
  154. visibility: hidden;
  155. opacity: 0;
  156. padding: 10px;
  157. border-radius: 8px;
  158. background: var(--white);
  159. border: 1px solid var(--border);
  160. -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  161. box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  162. transition: all linear .1s;
  163. -webkit-transition: all linear .1s;
  164. -moz-transition: all linear .1s;
  165. -ms-transition: all linear .1s;
  166. -o-transition: all linear .1s;
  167. }
  168. .dropdown-position-list::before {
  169. position: absolute;
  170. content: "";
  171. z-index: -1;
  172. top: -7px;
  173. left: 12px;
  174. width: 12px;
  175. height: 12px;
  176. border-radius: 3px;
  177. -webkit-transform: rotate(45deg);
  178. transform: rotate(45deg);
  179. background: var(--white);
  180. border-top: 1px solid var(--border);
  181. border-left: 1px solid var(--border);
  182. }
  183. .dropdown-submenu .dropdown-arrow {
  184. display: flex;
  185. align-items: center;
  186. }
  187. .dropdown-submenu .dropdown-arrow::before {transform: rotate(-90deg); top: 30%;}
  188. .dropdown-position-list li a {
  189. width: 100%;
  190. font-size: 15px;
  191. line-height: 18px;
  192. border-radius: 8px;
  193. padding: 8px 15px;
  194. color: var(--text);
  195. background: var(--white);
  196. white-space: nowrap;
  197. text-transform: capitalize;
  198. /*transition: all linear .3s;*/
  199. /*-webkit-transition: all linear .3s;*/
  200. /*-moz-transition: all linear .3s;*/
  201. /*-ms-transition: all linear .3s;*/
  202. /*-o-transition: all linear .3s;*/
  203. }
  204. .dropdown-position-list li a:hover {
  205. color: var(--primary);
  206. background: var(--chalk);
  207. }
  208. .dropdown-submenu {position:relative;}
  209. .dropdown-submenu .dropdown-position-list {top:0!important; left: calc(100% + 15px); visibility:hidden!important;}
  210. .dropdown-submenu:hover .dropdown-position-list {left: calc(100% + 5px); visibility: visible!important; opacity: 1;}
  211. .dropdown-submenu .dropdown-position-list::before {top:15px;left:-8px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
  212. .dropdown-megamenu {
  213. position: static;
  214. }
  215. .dropdown-megamenu:hover .megamenu {
  216. visibility: visible;
  217. opacity: 1;
  218. top: 199px;
  219. }
  220. .megamenu {
  221. position: absolute;
  222. top: 230px;
  223. left: 50%;
  224. z-index: 2;
  225. width: 1180px;
  226. border-radius: 8px;
  227. padding: 30px;
  228. background: var(--white);
  229. border: 1px solid var(--border);
  230. -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  231. box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  232. -webkit-transform: translateX(-50%);
  233. transform: translateX(-50%);
  234. visibility: hidden;
  235. opacity: 0;
  236. transition: all linear .3s;
  237. -webkit-transition: all linear .3s;
  238. -moz-transition: all linear .3s;
  239. -ms-transition: all linear .3s;
  240. -o-transition: all linear .3s;
  241. }
  242. .megamenu-scroll {
  243. height: 380px;
  244. overflow-y: scroll;
  245. }
  246. .megamenu-wrap {
  247. margin-bottom: 30px;
  248. }
  249. .megamenu-title {
  250. padding-bottom: 18px;
  251. margin-bottom: 20px;
  252. position: relative;
  253. text-transform: capitalize;
  254. border-bottom: 1px solid var(--border);
  255. }
  256. .megamenu-title::before {
  257. position: absolute;
  258. content: "";
  259. bottom: -2px;
  260. left: 0px;
  261. width: 50px;
  262. height: 2px;
  263. background: var(--primary);
  264. }
  265. .megamenu-list {
  266. border-left: 1px solid var(--border);
  267. }
  268. .megamenu-list li a {
  269. width: 100%;
  270. border-radius: 5px;
  271. padding: 5px 0px 5px 25px;
  272. color: var(--text);
  273. white-space: nowrap;
  274. text-transform: capitalize;
  275. transition: all linear .3s;
  276. -webkit-transition: all linear .3s;
  277. -moz-transition: all linear .3s;
  278. -ms-transition: all linear .3s;
  279. -o-transition: all linear .3s;
  280. }
  281. .megamenu-list li a:hover {
  282. color: var(--primary);
  283. background: var(--chalk);
  284. }
  285. .megamenu-promo a img {
  286. width: 100%;
  287. border-radius: 3px;
  288. }
  289. @media (max-width: 1199px) {
  290. .megamenu {
  291. width: 100%;
  292. }
  293. }
  294. .form-title {
  295. text-align: center;
  296. margin-bottom: 20px;
  297. }
  298. .form-title h3 {
  299. text-transform: capitalize;
  300. }
  301. .form-group {
  302. margin-bottom: 25px;
  303. }
  304. .form-group small {
  305. color: var(--gray);
  306. letter-spacing: 0.3px;
  307. padding: 0px 0px 0px 20px;
  308. }
  309. .form-group textarea {
  310. height: 150px;
  311. padding: 12px 20px;
  312. }
  313. .form-details-label new {
  314. font-weight: 500;
  315. margin: 0px 0px 7px 3px;
  316. white-space: nowrap;
  317. text-transform: capitalize;
  318. }
  319. .pay-type-sections input {
  320. padding: 0 10px 2px !important;
  321. }
  322. .form-control {
  323. width: 100%;
  324. height: 45px;
  325. border-radius: 6px;
  326. padding: 0 10px 2px;
  327. color: var(--text);
  328. background: var(--chalk);
  329. border: 1px solid var(--border);
  330. }
  331. .form-control:focus-within {
  332. background: var(--chalk);
  333. border-color: var(--primary);
  334. -webkit-box-shadow: none;
  335. box-shadow: none;
  336. outline: 0;
  337. }
  338. .form-control[type=file]::-webkit-file-upload-button,
  339. .form-control[type=file]::file-selector-button {
  340. border: none;
  341. background: none;
  342. height: 45px;
  343. line-height: 45px;
  344. padding: 5px 15px 0px;
  345. color: var(--gray);
  346. }
  347. .form-control[type=file]::-webkit-file-upload-button:hover,
  348. .form-control[type=file]::file-selector-button:hover {
  349. background-color: transparent;
  350. }
  351. .form-control[type=file]::-webkit-file-upload-button:focus,
  352. .form-control[type=file]::file-selector-button:focus {
  353. border: none;
  354. outline: none;
  355. }
  356. .form-select {
  357. height: 45px;
  358. font-size: 15px;
  359. padding: 0px 16px;
  360. letter-spacing: 0.3px;
  361. background-size: 12px 10px;
  362. text-transform: capitalize;
  363. color: var(--text);
  364. cursor: pointer;
  365. }
  366. .form-select:focus-within {
  367. -webkit-box-shadow: none;
  368. box-shadow: none;
  369. border-color: var(--primary);
  370. }
  371. .form-check-input:focus {
  372. border-color: var(--primary);
  373. -webkit-box-shadow: none;
  374. box-shadow: none;
  375. }
  376. .form-check-input:checked {
  377. background-color: var(--primary);
  378. border-color: var(--primary);
  379. }
  380. .form-btn {
  381. width: 100%;
  382. height: 45px;
  383. font-size: 14px;
  384. font-weight: 400;
  385. line-height: 45px;
  386. border-radius: 6px;
  387. letter-spacing: 0.5px;
  388. text-align: center;
  389. text-transform: uppercase;
  390. color: var(--white);
  391. background: var(--black);
  392. }
  393. .form-input-group {
  394. position: relative;
  395. }
  396. .form-input-group:focus-within i {
  397. color: var(--primary);
  398. }
  399. .form-input-group input {
  400. padding: 0px 20px 2px 45px;
  401. }
  402. .form-input-group textarea {
  403. padding: 12px 20px 12px 45px;
  404. }
  405. .form-input-group i {
  406. position: absolute;
  407. top: 0px;
  408. left: 0px;
  409. width: 45px;
  410. height: 45px;
  411. font-size: 18px;
  412. line-height: 45px;
  413. border-radius: 50%;
  414. text-align: center;
  415. }
  416. .form-btn-group {
  417. width: 100%;
  418. height: 45px;
  419. font-size: 14px;
  420. font-weight: 500;
  421. line-height: 45px;
  422. border-radius: 6px;
  423. letter-spacing: 0.5px;
  424. text-align: center;
  425. text-transform: uppercase;
  426. color: var(--white);
  427. background: var(--primary);
  428. }
  429. .form-btn-group i {
  430. font-size: 15px;
  431. margin-right: 5px;
  432. /*display: inline-block;*/
  433. }
  434. .nav-tabs {
  435. border: none;
  436. padding: 25px 25px;
  437. border-radius: 8px;
  438. margin-bottom: 25px;
  439. -webkit-box-align: center;
  440. -ms-flex-align: center;
  441. align-items: center;
  442. -webkit-box-pack: center;
  443. -ms-flex-pack: center;
  444. justify-content: center;
  445. background: var(--white);
  446. }
  447. .nav-tabs li {
  448. padding: 0px 30px;
  449. border-right: 1px solid var(--border);
  450. }
  451. .nav-tabs li:last-child {
  452. border: none;
  453. }
  454. .tab-link {
  455. font-size: 15px;
  456. font-weight: 500;
  457. text-transform: uppercase;
  458. color: var(--heading);
  459. transition: all linear .3s;
  460. -webkit-transition: all linear .3s;
  461. -moz-transition: all linear .3s;
  462. -ms-transition: all linear .3s;
  463. -o-transition: all linear .3s;
  464. }
  465. .tab-link:hover {
  466. color: var(--primary);
  467. }
  468. .tab-link i {
  469. font-size: 18px;
  470. margin-right: 3px;
  471. }
  472. .tab-link.active {
  473. color: var(--primary);
  474. }
  475. .tab-pane {
  476. display: none;
  477. padding: 0px;
  478. }
  479. .tab-pane.active {
  480. display: block;
  481. }
  482. @media (max-width: 575px) {
  483. .nav-tabs {
  484. -ms-flex-wrap: nowrap;
  485. flex-wrap: nowrap;
  486. -webkit-box-orient: vertical;
  487. -webkit-box-direction: normal;
  488. -ms-flex-direction: column;
  489. flex-direction: column;
  490. }
  491. .nav-tabs li {
  492. padding: 5px;
  493. border: none;
  494. }
  495. }
  496. @media (min-width: 576px) and (max-width: 767px) {
  497. .nav-tabs {
  498. padding: 25px 10px;
  499. }
  500. .nav-tabs li {
  501. padding: 0px 20px;
  502. }
  503. }
  504. .pagination {
  505. -webkit-box-align: center;
  506. -ms-flex-align: center;
  507. align-items: center;
  508. -webkit-box-pack: center;
  509. -ms-flex-pack: center;
  510. justify-content: center;
  511. }
  512. .page-item {
  513. margin-left: 10px;
  514. }
  515. .page-item:first-child .page-link, .page-item:last-child .page-link {
  516. display:flex; align-items:center; justify-content:center;
  517. border-radius: 50%;
  518. }
  519. .page-item .active {
  520. color: var(--white);
  521. background: var(--black);
  522. }
  523. .page-link {
  524. width: 30px;
  525. height: 30px;
  526. line-height: 30px;
  527. text-align: center;
  528. font-weight: 400;
  529. border: none;
  530. padding: 0px;
  531. color: var(--text);
  532. background: var(--white);
  533. }
  534. .page-link:hover {
  535. color: var(--white);
  536. background: var(--black);
  537. }
  538. .page-link:focus {
  539. -webkit-box-shadow: none;
  540. box-shadow: none;
  541. }
  542. @media (max-width: 991px) {
  543. .page-link {
  544. width: 35px;
  545. height: 35px;
  546. line-height: 35px;
  547. }
  548. }
  549. @media (max-width: 767px) {
  550. .page-item {
  551. margin: 0px 3px;
  552. }
  553. }
  554. .star-rating {
  555. direction: rtl;
  556. text-align: center;
  557. margin: 25px 0px;
  558. }
  559. .star-rating input {
  560. display: none;
  561. }
  562. .star-rating input:checked ~ details-label new::after {
  563. opacity: 1;
  564. }
  565. .star-rating details-label new {
  566. display: inline-block;
  567. position: relative;
  568. cursor: pointer;
  569. margin: 0px 8px;
  570. }
  571. .star-rating details-label new:hover::after {
  572. opacity: 1;
  573. }
  574. .star-rating details-label new:hover:hover ~ details-label new::after {
  575. opacity: 1;
  576. }
  577. .star-rating details-label new::before {
  578. content: "\ec7c";
  579. font-family: 'Icofont';
  580. font-weight: 900;
  581. font-size: 35px;
  582. display: block;
  583. color: #bbbbbb;
  584. }
  585. .star-rating label::after {
  586. content: "\ec7c";
  587. font-family: 'Icofont';
  588. font-weight: 900;
  589. font-size: 35px;
  590. position: absolute;
  591. display: block;
  592. top: 0px;
  593. left: 0px;
  594. color: var(--yellow);
  595. opacity: 0;
  596. }
  597. .slider-arrow:hover .dandik,
  598. .slider-arrow:hover .bamdik {
  599. visibility: visible;
  600. opacity: 1;
  601. }
  602. .dandik,
  603. .bamdik {
  604. position: absolute;
  605. top: 50%;
  606. -webkit-transform: translateY(-50%);
  607. transform: translateY(-50%);
  608. font-size: 20px;
  609. width: 45px;
  610. height: 45px;
  611. line-height: 45px;
  612. text-align: center;
  613. border-radius: 50%;
  614. color: var(--black);
  615. background: var(--white);
  616. text-shadow: var(--primary-tshadow);
  617. -webkit-box-shadow: var(--primary-bshadow);
  618. box-shadow: var(--primary-bshadow);
  619. visibility: hidden;
  620. opacity: 0;
  621. cursor: pointer;
  622. z-index: 1;
  623. transition: all linear .3s;
  624. -webkit-transition: all linear .3s;
  625. -moz-transition: all linear .3s;
  626. -ms-transition: all linear .3s;
  627. -o-transition: all linear .3s;
  628. }
  629. .dandik:hover,
  630. .bamdik:hover {
  631. color: var(--white);
  632. background: var(--black);
  633. }
  634. .dandik {
  635. right: -10px;
  636. }
  637. .bamdik {
  638. left: -10px;
  639. }
  640. .slider-dots ul {
  641. position: absolute;
  642. bottom: 20px;
  643. left: 50%;
  644. -webkit-transform: translateX(-50%);
  645. transform: translateX(-50%);
  646. }
  647. .slider-dots ul li {
  648. width: 9px;
  649. height: 9px;
  650. margin: 0px 5px;
  651. border-radius: 30px;
  652. cursor: pointer;
  653. display: inline-block;
  654. background: var(--primary);
  655. -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  656. box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  657. transition: all linear .3s;
  658. -webkit-transition: all linear .3s;
  659. -moz-transition: all linear .3s;
  660. -ms-transition: all linear .3s;
  661. -o-transition: all linear .3s;
  662. }
  663. .slider-dots ul li button {
  664. display: none;
  665. }
  666. .slider-dots ul li.slick-active {
  667. width: 25px;
  668. background: var(--primary);
  669. transition: all linear .3s;
  670. -webkit-transition: all linear .3s;
  671. -moz-transition: all linear .3s;
  672. -ms-transition: all linear .3s;
  673. -o-transition: all linear .3s;
  674. }
  675. @media (max-width: 575px) {
  676. .slider-dots ul {
  677. bottom: 10px;
  678. }
  679. .slider-dots ul li {
  680. margin: 0px 6px;
  681. }
  682. }
  683. @media (min-width: 576px) and (max-width: 767px) {
  684. .slider-dots ul {
  685. bottom: 20px;
  686. }
  687. .slider-dots ul li {
  688. margin: 0px 6px;
  689. }
  690. }
  691. .product-add {
  692. width: 100%;
  693. padding: 6px 0px;
  694. text-transform: capitalize;
  695. color: var(--black);
  696. display: -webkit-box;
  697. display: -ms-flexbox;
  698. display: flex;
  699. -webkit-box-align: baseline;
  700. -ms-flex-align: baseline;
  701. align-items: baseline;
  702. -webkit-box-pack: flex-start;
  703. -ms-flex-pack: flex-start;
  704. justify-content: flex-start;
  705. transition: all linear .3s;
  706. -webkit-transition: all linear .3s;
  707. -moz-transition: all linear .3s;
  708. -ms-transition: all linear .3s;
  709. -o-transition: all linear .3s;
  710. }
  711. .product-add i {
  712. margin-right: 5px;
  713. }
  714. .product-action {
  715. display: -webkit-box;
  716. display: -ms-flexbox;
  717. display: flex;
  718. -webkit-box-align: center;
  719. -ms-flex-align: center;
  720. align-items: center;
  721. -webkit-box-pack: center;
  722. -ms-flex-pack: center;
  723. justify-content: center;
  724. /*display: none;*/
  725. }
  726. .product-action button i {
  727. width: 35px;
  728. height: 35px;
  729. font-size: 14px;
  730. line-height: 35px;
  731. border-radius: 6px;
  732. text-align: center;
  733. display: inline-block;
  734. color: var(--text);
  735. background: var(--chalk);
  736. text-shadow: var(--primary-tshadow);
  737. transition: all linear .3s;
  738. -webkit-transition: all linear .3s;
  739. -moz-transition: all linear .3s;
  740. -ms-transition: all linear .3s;
  741. -o-transition: all linear .3s;
  742. }
  743. .product-action button i:hover {
  744. color: var(--white);
  745. background: var(--black);
  746. }
  747. .product-action input {
  748. width: 50px;
  749. font-size: 15px;
  750. margin: 0px 5px;
  751. padding: 6px 0px;
  752. border-radius: 6px;
  753. text-align: center;
  754. color: var(--black);
  755. /*text-shadow: var(--primary-tshadow);*/
  756. }
  757. .table-list {
  758. width: 100%;
  759. }
  760. .header-top {
  761. padding: 8px 0px;
  762. background:#eff1f4;
  763. }
  764. .header-top.active {
  765. position: -webkit-sticky;
  766. position: sticky;
  767. top: 0px;
  768. left: 0px;
  769. width: 100%;
  770. z-index: 5;
  771. transition: all linear .3s;
  772. -webkit-transition: all linear .3s;
  773. -moz-transition: all linear .3s;
  774. -ms-transition: all linear .3s;
  775. -o-transition: all linear .3s;
  776. }
  777. .header-top-welcome p {
  778. font-size: 14px;
  779. color:#75787c;
  780. letter-spacing: 0.3px;
  781. }
  782. .header-top-select {
  783. margin-top: 3px;
  784. display: -webkit-box;
  785. display: -ms-flexbox;
  786. display: flex;
  787. -webkit-box-align: center;
  788. -ms-flex-align: center;
  789. align-items: center;
  790. -webkit-box-pack: center;
  791. -ms-flex-pack: center;
  792. justify-content: center;
  793. }
  794. .header-select {
  795. width: 100%;
  796. display: -webkit-box;
  797. display: -ms-flexbox;
  798. display: flex;
  799. -webkit-box-align: center;
  800. -ms-flex-align: center;
  801. align-items: center;
  802. -webkit-box-pack: center;
  803. -ms-flex-pack: center;
  804. justify-content: center;
  805. border-right: 1px solid var(--green);
  806. }
  807. .header-select:last-child {
  808. border: none;
  809. }
  810. .header-select i {
  811. font-size: 16px;
  812. margin-right: 8px;
  813. color: var(--white);
  814. }
  815. .header-select .nice-select {
  816. line-height: 20px;
  817. }
  818. .header-select .nice-select::after {
  819. border-right-color: var(--white);
  820. border-bottom-color: var(--white);
  821. }
  822. .header-select .nice-select .current {
  823. color:#75787c;
  824. }
  825. .header-top-list {
  826. display: -webkit-box;
  827. display: -ms-flexbox;
  828. display: flex;
  829. -webkit-box-align: center;
  830. -ms-flex-align: center;
  831. align-items: center;
  832. -webkit-box-pack: end;
  833. -ms-flex-pack: end;
  834. justify-content: flex-end;
  835. }
  836. .header-top-list li {
  837. margin-left: 35px;
  838. }
  839. .header-top-list li a {
  840. font-size: 14px;
  841. color:#75787c;
  842. letter-spacing: 0.3px;
  843. white-space: nowrap;
  844. text-transform: capitalize;
  845. transition: all linear .3s;
  846. -webkit-transition: all linear .3s;
  847. -moz-transition: all linear .3s;
  848. -ms-transition: all linear .3s;
  849. -o-transition: all linear .3s;
  850. }
  851. .header-top-list li a:hover {
  852. color: var(--primary);
  853. }
  854. @media (max-width: 991px) {
  855. /*.header-top {display:none;}*/
  856. /*.header-top-welcome,
  857. .header-top-list {
  858. display: none;
  859. }*/
  860. .header-top-welcome {margin-top:5px; margin-bottom:5px; padding:5px 10px; background:#e3e5e9; border-radius:50px; text-align:center;}
  861. .header-top-select {
  862. width: 270px;
  863. margin: 0px auto;
  864. }
  865. }
  866. @media (min-width: 768px) and (max-width: 991px) {
  867. .header-top-welcome {
  868. text-align: center;
  869. }
  870. }
  871. .header-part {
  872. background: var(--white);
  873. transition: all linear .3s;
  874. -webkit-transition: all linear .3s;
  875. -moz-transition: all linear .3s;
  876. -ms-transition: all linear .3s;
  877. -o-transition: all linear .3s;
  878. }
  879. .header-part.active {
  880. position: -webkit-sticky;
  881. position: sticky;
  882. top: 40px;
  883. left: 0px;
  884. width: 100%;
  885. z-index: 3;
  886. background: var(--white);
  887. -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
  888. box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
  889. transition: all linear .3s;
  890. -webkit-transition: all linear .3s;
  891. -moz-transition: all linear .3s;
  892. -ms-transition: all linear .3s;
  893. -o-transition: all linear .3s;
  894. }
  895. .header-part.active .header-content {
  896. padding: 15px 0px;
  897. }
  898. .header-part.active .header-widget:hover i {
  899. background: var(--primary);
  900. }
  901. .header-part.active .header-widget sup {
  902. border-color: var(--white);
  903. }
  904. .header-part.active .header-form {
  905. background: var(--white);
  906. border-color: var(--primary);
  907. }
  908. .header-content {
  909. padding: 18px 0px;
  910. display: -webkit-box;
  911. display: -ms-flexbox;
  912. display: flex;
  913. -webkit-box-align: center;
  914. -ms-flex-align: center;
  915. align-items: center;
  916. -webkit-box-pack: center;
  917. -ms-flex-pack: center;
  918. justify-content: center;
  919. transition: all linear .3s;
  920. -webkit-transition: all linear .3s;
  921. -moz-transition: all linear .3s;
  922. -ms-transition: all linear .3s;
  923. -o-transition: all linear .3s;
  924. }
  925. .header-logo {
  926. margin-right: 50px;
  927. }
  928. .header-logo img {
  929. width: auto;
  930. height: 48px;
  931. transition: all linear .3s;
  932. -webkit-transition: all linear .3s;
  933. -moz-transition: all linear .3s;
  934. -ms-transition: all linear .3s;
  935. -o-transition: all linear .3s;
  936. }
  937. .header-widget-group {
  938. display: -webkit-box;
  939. display: -ms-flexbox;
  940. display: flex;
  941. -webkit-box-align: center;
  942. -ms-flex-align: center;
  943. align-items: center;
  944. -webkit-box-pack: center;
  945. -ms-flex-pack: center;
  946. justify-content: center;
  947. }
  948. .header-widget-group .header-widget {
  949. margin-left: 20px;
  950. }
  951. .header-widget-group .header-widget:first-child {
  952. margin-left: 40px;
  953. }
  954. .header-widget {
  955. position: relative;
  956. display: -webkit-box;
  957. display: -ms-flexbox;
  958. display: flex;
  959. -webkit-box-align: center;
  960. -ms-flex-align: center;
  961. align-items: center;
  962. -webkit-box-pack: center;
  963. -ms-flex-pack: center;
  964. justify-content: center;
  965. }
  966. .header-widget:hover i {
  967. color: var(--white);
  968. background: var(--primary);
  969. text-shadow: var(--primary-tshadow);
  970. }
  971. .header-widget:hover span {
  972. color: var(--primary);
  973. }
  974. .header-widget img {
  975. width: 40px;
  976. height: 40px;
  977. border-radius: 50%;
  978. }
  979. .header-widget i {
  980. width: 40px;
  981. height: 40px;
  982. font-size: 15px;
  983. line-height: 40px;
  984. text-align: center;
  985. display: inline-block;
  986. border-radius: 50%;
  987. color: var(--text);
  988. background: var(--chalk);
  989. transition: all linear .3s;
  990. -webkit-transition: all linear .3s;
  991. -moz-transition: all linear .3s;
  992. -ms-transition: all linear .3s;
  993. -o-transition: all linear .3s;
  994. }
  995. .header-widget span {
  996. font-size: 15px;
  997. font-weight: 400;
  998. margin-left: 8px;
  999. letter-spacing: 0.3px;
  1000. white-space: nowrap;
  1001. text-align: left;
  1002. text-transform: capitalize;
  1003. color: var(--heading);
  1004. transition: all linear .3s;
  1005. -webkit-transition: all linear .3s;
  1006. -moz-transition: all linear .3s;
  1007. -ms-transition: all linear .3s;
  1008. -o-transition: all linear .3s;
  1009. }
  1010. .header-widget span small {
  1011. font-size: 16px;
  1012. font-weight: 600;
  1013. line-height: 20px;
  1014. font-family: sans-serif;
  1015. display: block;
  1016. }
  1017. .header-widget sup {
  1018. position: absolute;
  1019. top: -12px;
  1020. left: 20px;
  1021. width: 24px;
  1022. height: 24px;
  1023. font-size: 12px;
  1024. line-height: 20px;
  1025. border-radius: 50%;
  1026. text-align: center;
  1027. color: var(--white);
  1028. background: var(--primary);
  1029. border: 2px solid var(--white);
  1030. text-shadow: var(--primary-tshadow);
  1031. }
  1032. .header-cart span {
  1033. font-size: 12px;
  1034. margin-left: 15px;
  1035. line-height: 20px;
  1036. text-transform: uppercase;
  1037. }
  1038. .header-form {
  1039. width: 100%;
  1040. margin: 0px 50px;
  1041. border-radius: 50px;
  1042. background: var(--white);
  1043. border: 1px solid #616674;
  1044. display: -webkit-box;
  1045. display: -ms-flexbox;
  1046. display: flex;
  1047. -webkit-box-align: center;
  1048. -ms-flex-align: center;
  1049. align-items: center;
  1050. -webkit-box-pack: center;
  1051. -ms-flex-pack: center;
  1052. justify-content: center;
  1053. transition: all linear .3s;
  1054. -webkit-transition: all linear .3s;
  1055. -moz-transition: all linear .3s;
  1056. -ms-transition: all linear .3s;
  1057. -o-transition: all linear .3s;
  1058. }
  1059. .header-form:focus-within {
  1060. background: var(--white);
  1061. border-color: var(--primary);
  1062. }
  1063. .header-form input {
  1064. width: 100%;
  1065. height: 45px;
  1066. font-size: 15px;
  1067. padding-left: 15px;
  1068. }
  1069. .header-form button i {
  1070. width: 45px;
  1071. height: 45px;
  1072. font-size: 15px;
  1073. line-height: 45px;
  1074. text-align: center;
  1075. border-radius: 8px;
  1076. color: var(--text);
  1077. display: inline-block;
  1078. transition: all linear .3s;
  1079. -webkit-transition: all linear .3s;
  1080. -moz-transition: all linear .3s;
  1081. -ms-transition: all linear .3s;
  1082. -o-transition: all linear .3s;
  1083. }
  1084. .header-form button i:hover {
  1085. color: var(--primary);
  1086. }
  1087. .header-media-group {
  1088. display: none;
  1089. -webkit-box-align: center;
  1090. -ms-flex-align: center;
  1091. align-items: center;
  1092. -webkit-box-pack: justify;
  1093. -ms-flex-pack: justify;
  1094. justify-content: space-between;
  1095. }
  1096. .header-media-group a img {
  1097. width: auto;
  1098. height: 45px;
  1099. }
  1100. .header-user img,
  1101. .header-src img {
  1102. width: 40px;
  1103. height: 40px;
  1104. border-radius: 50%;
  1105. }
  1106. .header-user i,
  1107. .header-src i {
  1108. width: 40px;
  1109. height: 40px;
  1110. font-size: 15px;
  1111. line-height: 40px;
  1112. text-align: center;
  1113. display: inline-block;
  1114. border-radius: 50%;
  1115. color: var(--text);
  1116. background: var(--chalk);
  1117. transition: all linear .3s;
  1118. -webkit-transition: all linear .3s;
  1119. -moz-transition: all linear .3s;
  1120. -ms-transition: all linear .3s;
  1121. -o-transition: all linear .3s;
  1122. }
  1123. .header-user i:hover,
  1124. .header-src i:hover {
  1125. color: var(--white);
  1126. background: var(--primary);
  1127. }
  1128. @media (max-width: 991px) {
  1129. .header-content {
  1130. padding: 10px 0px;
  1131. -webkit-box-orient: vertical;
  1132. -webkit-box-direction: normal;
  1133. -ms-flex-direction: column;
  1134. flex-direction: column;
  1135. }
  1136. .header-media-group {
  1137. width: 100%;
  1138. display: -webkit-box;
  1139. display: -ms-flexbox;
  1140. display: flex;
  1141. }
  1142. .header-widget-group,
  1143. .header-widget,
  1144. .header-logo {
  1145. display: none;
  1146. }
  1147. .header-form {
  1148. display: none;
  1149. margin: 10px 0px 0px;
  1150. }
  1151. .header-form.active {
  1152. display: -webkit-box;
  1153. display: -ms-flexbox;
  1154. display: flex;
  1155. }
  1156. }
  1157. @media (min-width: 992px) and (max-width: 1199px) {
  1158. .header-widget span {
  1159. /*display: none;*/
  1160. }
  1161. }
  1162. .navbar-part {
  1163. background: var(--white);
  1164. border-bottom:1px solid #c5c6c9;
  1165. /*-webkit-box-shadow: 0px 7px 10px 0px rgb(0 0 0 / 9%);
  1166. box-shadow: 0px 7px 10px 0px rgb(0 0 0 / 9%);*/
  1167. }
  1168. .navbar-content {
  1169. border-top: 1px solid var(--border);
  1170. display: -webkit-box;
  1171. display: -ms-flexbox;
  1172. display: flex;
  1173. -webkit-box-align: center;
  1174. -ms-flex-align: center;
  1175. align-items: center;
  1176. -webkit-box-pack: justify;
  1177. -ms-flex-pack: justify;
  1178. justify-content: space-between;
  1179. }
  1180. .navbar-list {
  1181. display: -webkit-box;
  1182. display: -ms-flexbox;
  1183. display: flex;
  1184. -webkit-box-align: center;
  1185. -ms-flex-align: center;
  1186. align-items: center;
  1187. -webkit-box-pack: start;
  1188. -ms-flex-pack: start;
  1189. justify-content: flex-start;
  1190. }
  1191. .navbar-item {
  1192. margin-right: 30px;
  1193. }
  1194. .navbar-item:last-child {
  1195. margin-right: 0px;
  1196. }
  1197. .navbar-link {
  1198. padding: 22px 0px;
  1199. font-weight: 500;
  1200. color: var(--text);
  1201. text-transform: capitalize;
  1202. /*transition: all linear .3s;*/
  1203. /*-webkit-transition: all linear .3s;*/
  1204. /*-moz-transition: all linear .3s;*/
  1205. /*-ms-transition: all linear .3s;*/
  1206. /*-o-transition: all linear .3s;*/
  1207. }
  1208. .navbar-link:hover {
  1209. color: var(--primary);
  1210. }
  1211. .navbar-focus-list {
  1212. display: -webkit-box;
  1213. display: -ms-flexbox;
  1214. display: flex;
  1215. -webkit-box-align: center;
  1216. -ms-flex-align: center;
  1217. align-items: center;
  1218. -webkit-box-pack: end;
  1219. -ms-flex-pack: end;
  1220. justify-content: flex-end;
  1221. }
  1222. .navbar-focus-list li {
  1223. margin-left: 30px;
  1224. }
  1225. .navbar-focus-list li:first-child {
  1226. margin-left: 0px;
  1227. }
  1228. .navbar-focus-list li a {
  1229. font-weight: 500;
  1230. color: var(--text);
  1231. text-transform: capitalize;
  1232. transition: all linear .3s;
  1233. -webkit-transition: all linear .3s;
  1234. -moz-transition: all linear .3s;
  1235. -ms-transition: all linear .3s;
  1236. -o-transition: all linear .3s;
  1237. }
  1238. .navbar-focus-list li a:hover {
  1239. color: var(--primary);
  1240. }
  1241. .navbar-focus-list li a i {
  1242. font-size: 18px;
  1243. margin-right: 5px;
  1244. }
  1245. .navbar-info-group {
  1246. display: -webkit-box;
  1247. display: -ms-flexbox;
  1248. display: flex;
  1249. -webkit-box-align: center;
  1250. -ms-flex-align: center;
  1251. align-items: center;
  1252. -webkit-box-pack: center;
  1253. -ms-flex-pack: center;
  1254. justify-content: center;
  1255. }
  1256. .navbar-info {
  1257. margin-right: 30px;
  1258. display: -webkit-box;
  1259. display: -ms-flexbox;
  1260. display: flex;
  1261. -webkit-box-align: center;
  1262. -ms-flex-align: center;
  1263. align-items: center;
  1264. -webkit-box-pack: start;
  1265. -ms-flex-pack: start;
  1266. justify-content: flex-start;
  1267. }
  1268. .navbar-info:last-child {
  1269. margin-right: 0px;
  1270. }
  1271. .navbar-info i {
  1272. font-size: 24px;
  1273. margin-right: 10px;
  1274. color: var(--black);
  1275. }
  1276. .navbar-info p small {
  1277. margin-bottom:-2px;
  1278. font-size: 14px;
  1279. line-height: 16px;
  1280. display: block;
  1281. text-align: left;
  1282. text-transform: capitalize;
  1283. color:#707070;
  1284. }
  1285. .navbar-info p span {
  1286. font-size: 15px;
  1287. }
  1288. .navbar-info a, .navbar-info a:hover {
  1289. color:inherit;
  1290. }
  1291. @media (max-width: 991px) {
  1292. .navbar-part {
  1293. display: none;
  1294. }
  1295. }
  1296. @media (min-width: 992px) and (max-width: 1199px) {
  1297. /*.navbar-list li {*/
  1298. /* margin-right: 18px;*/
  1299. /*}*/
  1300. .navbar-link {
  1301. font-size: 15px;
  1302. }
  1303. .navbar-info {
  1304. margin-right: 15px;
  1305. }
  1306. .navbar-info p span {
  1307. font-size: 14px;
  1308. }
  1309. .navbar-info i {
  1310. margin-right: 10px;
  1311. }
  1312. }
  1313. .nav-sidebar {
  1314. position: fixed;
  1315. top: 0px;
  1316. left: -320px;
  1317. width: 280px;
  1318. height: 100vh;
  1319. padding: 0px;
  1320. z-index: 5;
  1321. background: var(--white);
  1322. -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1323. box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1324. transition: all linear .3s;
  1325. -webkit-transition: all linear .3s;
  1326. -moz-transition: all linear .3s;
  1327. -ms-transition: all linear .3s;
  1328. -o-transition: all linear .3s;
  1329. }
  1330. .nav-sidebar.active {
  1331. left: 0px;
  1332. }
  1333. .nav-sidebar .nav-list li ul li a {padding:10px 20px;}
  1334. /*.nav-sidebar .nav-list li > ul a.active {background:#fff;}*/
  1335. .nav-sidebar .nav-list li ul ul li {padding-left:20px;}
  1336. .nav-sidebar .dropdown-list {padding:0;}
  1337. .nav-sidebar .nav-list li {position:relative;}
  1338. .nav-sidebar .nav_arrow {position:absolute; top:24px; right:0; z-index:50;}
  1339. .nav-sidebar .nav_arrow.active~a {color: var(--primary); background: var(--green-chalk);}
  1340. .nav-sidebar .nav-link::before {display:none;}
  1341. .nav-sidebar .dropdown-link:hover {}
  1342. .nav-link:hover {
  1343. color: var(--primary);
  1344. background: var(--chalk);}
  1345. .nav-header {
  1346. padding: 15px 0px;
  1347. position: relative;
  1348. text-align: center;
  1349. border-bottom: 1px solid var(--border);
  1350. }
  1351. .nav-header a img {
  1352. width: auto;
  1353. height: 40px;
  1354. }
  1355. .nav-close {
  1356. position: absolute;
  1357. top: 50%;
  1358. right: -18px;
  1359. -webkit-transform: translateY(-50%);
  1360. transform: translateY(-50%);
  1361. }
  1362. .nav-close i {
  1363. width: 35px;
  1364. height: 35px;
  1365. font-size: 18px;
  1366. line-height: 35px;
  1367. border-radius: 50%;
  1368. text-align: center;
  1369. display: inline-block;
  1370. color: var(--text);
  1371. background: var(--white);
  1372. text-shadow: var(--primary-tshadow);
  1373. transition: all linear .3s;
  1374. -webkit-transition: all linear .3s;
  1375. -moz-transition: all linear .3s;
  1376. -ms-transition: all linear .3s;
  1377. -o-transition: all linear .3s;
  1378. }
  1379. .nav-close i:hover {
  1380. color: var(--white);
  1381. background: var(--primary);
  1382. }
  1383. .nav-content {
  1384. padding: 0px 18px;
  1385. overflow-y: scroll;
  1386. max-height: calc(100vh - 100px);
  1387. }
  1388. .nav-btn {
  1389. width: 100%;
  1390. padding: 20px 0px;
  1391. margin-bottom: 20px;
  1392. text-align: center;
  1393. background: var(--chalk);
  1394. }
  1395. .nav-btn .btn {
  1396. display:block;
  1397. width:90%;
  1398. margin: 10px auto;
  1399. font-size: 14px;
  1400. padding: 15px 25px;
  1401. letter-spacing: 0.3px;
  1402. border:2px solid var(--black);
  1403. }
  1404. .nav-btn .btn i {
  1405. font-size: 14px;
  1406. }
  1407. .nav-profile {
  1408. width: 100%;
  1409. text-align: center;
  1410. padding: 18px 0px 0px;
  1411. }
  1412. .nav-user {
  1413. margin-bottom: 10px;
  1414. border-radius: 50%;
  1415. border: 2px solid var(--primary);
  1416. }
  1417. .nav-user img {
  1418. width: 85px;
  1419. height: 85px;
  1420. border-radius: 50%;
  1421. border: 2px solid var(--white);
  1422. }
  1423. .nav-name {
  1424. margin-bottom: 18px;
  1425. text-transform: capitalize;
  1426. }
  1427. .nav-name a {
  1428. color: var(--heading);
  1429. transition: all linear .3s;
  1430. -webkit-transition: all linear .3s;
  1431. -moz-transition: all linear .3s;
  1432. -ms-transition: all linear .3s;
  1433. -o-transition: all linear .3s;
  1434. }
  1435. .nav-name a:hover {
  1436. color: var(--primary);
  1437. }
  1438. .nav-select-group {
  1439. display: -webkit-box;
  1440. display: -ms-flexbox;
  1441. display: flex;
  1442. -webkit-box-align: center;
  1443. -ms-flex-align: center;
  1444. align-items: center;
  1445. -webkit-box-pack: center;
  1446. -ms-flex-pack: center;
  1447. justify-content: center;
  1448. padding-bottom: 18px;
  1449. border-bottom: 1px solid var(--border);
  1450. }
  1451. .nav-select {
  1452. display: -webkit-box;
  1453. display: -ms-flexbox;
  1454. display: flex;
  1455. -webkit-box-align: center;
  1456. -ms-flex-align: center;
  1457. align-items: center;
  1458. -webkit-box-pack: center;
  1459. -ms-flex-pack: center;
  1460. justify-content: center;
  1461. margin-right: 18px;
  1462. padding-right: 18px;
  1463. line-height: 20px;
  1464. border-right: 1px solid var(--gray-chalk);
  1465. }
  1466. .nav-select:last-child {
  1467. padding: 0px;
  1468. margin: 0px;
  1469. border: none;
  1470. }
  1471. .nav-select i {
  1472. margin-right: 5px;
  1473. }
  1474. .nav-list {
  1475. width: 100%;
  1476. }
  1477. .nav-list li {
  1478. width: 100%;
  1479. }
  1480. .nav-link {
  1481. width: 100%;
  1482. font-weight: 500;
  1483. padding: 12px 15px;
  1484. border-radius: 8px;
  1485. color: var(--text);
  1486. text-transform: capitalize;
  1487. transition: all linear .3s;
  1488. -webkit-transition: all linear .3s;
  1489. -moz-transition: all linear .3s;
  1490. -ms-transition: all linear .3s;
  1491. -o-transition: all linear .3s;
  1492. }
  1493. .nav-link:hover {
  1494. color: var(--primary);
  1495. background: var(--chalk);
  1496. }
  1497. .nav-link::before {
  1498. right: 15px;
  1499. }
  1500. .nav-link i {
  1501. font-size: 20px;
  1502. margin-right: 12px;
  1503. }
  1504. .nav-link.active {
  1505. color: var(--primary);
  1506. background: var(--green-chalk);
  1507. }
  1508. .nav-info-group {
  1509. padding: 20px 0px;
  1510. margin-top: 15px;
  1511. margin-bottom: 25px;
  1512. border-top: 1px solid var(--border);
  1513. border-bottom: 1px solid var(--border);
  1514. }
  1515. .nav-info {
  1516. margin-bottom: 20px;
  1517. display: -webkit-box;
  1518. display: -ms-flexbox;
  1519. display: flex;
  1520. -webkit-box-align: center;
  1521. -ms-flex-align: center;
  1522. align-items: center;
  1523. -webkit-box-pack: start;
  1524. -ms-flex-pack: start;
  1525. justify-content: flex-start;
  1526. }
  1527. .nav-info:last-child {
  1528. margin-bottom: 0px;
  1529. }
  1530. .nav-info i {
  1531. font-size: 30px;
  1532. margin-right: 15px;
  1533. color: var(--primary);
  1534. }
  1535. .nav-info p small {
  1536. font-size: 14px;
  1537. line-height: 18px;
  1538. display: block;
  1539. text-align: left;
  1540. text-transform: capitalize;
  1541. }
  1542. .nav-info p span {
  1543. font-size: 16px;
  1544. font-weight: 500;
  1545. }
  1546. .nav-footer {
  1547. text-align: center;
  1548. }
  1549. .nav-footer p {
  1550. font-size: 14px;
  1551. color: var(--gray);
  1552. }
  1553. .nav-footer p a {
  1554. color: var(--primary);
  1555. }
  1556. .cart-sidebar {
  1557. position: fixed;
  1558. top: 0px;
  1559. right: -450px;
  1560. width: 400px;
  1561. height: 100vh;
  1562. z-index: 5;
  1563. background: var(--white);
  1564. -webkit-box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1565. box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1566. transition: all linear .3s;
  1567. -webkit-transition: all linear .3s;
  1568. -moz-transition: all linear .3s;
  1569. -ms-transition: all linear .3s;
  1570. -o-transition: all linear .3s;
  1571. }
  1572. .cart-sidebar.active {
  1573. right: 0px;
  1574. }
  1575. .cart-header {
  1576. padding: 18px 25px;
  1577. text-align: center;
  1578. position: relative;
  1579. border-bottom: 1px solid var(--border);
  1580. }
  1581. .cart-total {
  1582. display: -webkit-box;
  1583. display: -ms-flexbox;
  1584. display: flex;
  1585. -webkit-box-align: center;
  1586. -ms-flex-align: center;
  1587. align-items: center;
  1588. -webkit-box-pack: center;
  1589. -ms-flex-pack: center;
  1590. justify-content: center;
  1591. }
  1592. .cart-total i {
  1593. font-size: 20px;
  1594. margin-right: 8px;
  1595. color: var(--black);
  1596. }
  1597. .cart-total span {
  1598. font-weight: 500;
  1599. color: var(--black);
  1600. text-transform: capitalize;
  1601. }
  1602. .cart-close {
  1603. position: absolute;
  1604. top: 50%;
  1605. left: -18px;
  1606. -webkit-transform: translateY(-50%);
  1607. transform: translateY(-50%);
  1608. }
  1609. .cart-close i {
  1610. width: 35px;
  1611. height: 35px;
  1612. font-size: 18px;
  1613. line-height: 35px;
  1614. border-radius: 50%;
  1615. text-align: center;
  1616. display: inline-block;
  1617. color: var(--text);
  1618. background: var(--white);
  1619. text-shadow: var(--primary-tshadow);
  1620. transition: all linear .3s;
  1621. -webkit-transition: all linear .3s;
  1622. -moz-transition: all linear .3s;
  1623. -ms-transition: all linear .3s;
  1624. -o-transition: all linear .3s;
  1625. }
  1626. .cart-close i:hover {
  1627. color: var(--white);
  1628. background: var(--primary);
  1629. }
  1630. .cart-list {
  1631. height: 100%;
  1632. padding: 0px 15px;
  1633. max-height: calc(100vh - 210px);
  1634. overflow-y: scroll;
  1635. }
  1636. .cart-item {
  1637. padding: 15px 0px;
  1638. display: -webkit-box;
  1639. display: -ms-flexbox;
  1640. display: flex;
  1641. -webkit-box-align: center;
  1642. -ms-flex-align: center;
  1643. align-items: center;
  1644. -webkit-box-pack: center;
  1645. -ms-flex-pack: center;
  1646. justify-content: center;
  1647. -webkit-box-align: start;
  1648. -ms-flex-align: start;
  1649. align-items: flex-start;
  1650. border-bottom: 1px solid var(--border);
  1651. }
  1652. .cart-item:hover .cart-media button {
  1653. -webkit-transform: scale(1);
  1654. transform: scale(1);
  1655. }
  1656. .cart-item:last-child {
  1657. border-bottom: none;
  1658. }
  1659. .cart-media {
  1660. position: relative;
  1661. margin-right: 25px;
  1662. }
  1663. .cart-media a img {
  1664. width: 100px;
  1665. border-radius: 8px;
  1666. }
  1667. .cart-media button {
  1668. position: absolute;
  1669. top: 0px;
  1670. left: 0px;
  1671. width: 100%;
  1672. height: 100%;
  1673. border-radius: 8px;
  1674. background: rgba(0, 0, 0, 0.2);
  1675. -webkit-transform: scale(0);
  1676. transform: scale(0);
  1677. transition: all linear .3s;
  1678. -webkit-transition: all linear .3s;
  1679. -moz-transition: all linear .3s;
  1680. -ms-transition: all linear .3s;
  1681. -o-transition: all linear .3s;
  1682. }
  1683. .cart-media button i {
  1684. width: 32px;
  1685. height: 32px;
  1686. font-size: 18px;
  1687. line-height: 32px;
  1688. text-align: center;
  1689. border-radius: 5px;
  1690. display: inline-block;
  1691. color: var(--red);
  1692. background: rgba(255, 255, 255, 0.9);
  1693. transition: all linear .3s;
  1694. -webkit-transition: all linear .3s;
  1695. -moz-transition: all linear .3s;
  1696. -ms-transition: all linear .3s;
  1697. -o-transition: all linear .3s;
  1698. }
  1699. .cart-media button i:hover {
  1700. color: var(--white);
  1701. background: var(--red);
  1702. }
  1703. .cart-info-group {
  1704. width: 100%;
  1705. }
  1706. .cart-info {
  1707. margin-bottom: 13px;
  1708. }
  1709. .cart-info h6 {
  1710. font-weight: 400;
  1711. text-transform: capitalize;
  1712. }
  1713. .cart-info h6 a {
  1714. color: var(--heading);
  1715. }
  1716. .cart-info p {
  1717. font-size: 14px;
  1718. }
  1719. .cart-action-group {
  1720. display: -webkit-box;
  1721. display: -ms-flexbox;
  1722. display: flex;
  1723. -webkit-box-align: center;
  1724. -ms-flex-align: center;
  1725. align-items: center;
  1726. -webkit-box-pack: center;
  1727. -ms-flex-pack: center;
  1728. justify-content: center;
  1729. -webkit-box-pack: justify;
  1730. -ms-flex-pack: justify;
  1731. justify-content: space-between;
  1732. }
  1733. .cart-action-group .product-action {
  1734. display: -webkit-box;
  1735. display: -ms-flexbox;
  1736. display: flex;
  1737. }
  1738. .cart-action-group .product-action button i {
  1739. width: 30px;
  1740. height: 30px;
  1741. font-size: 12px;
  1742. line-height: 30px;
  1743. border-radius: 5px;
  1744. }
  1745. .cart-action-group .product-action input {
  1746. width: 45px;
  1747. height: 30px;
  1748. font-size: 14px;
  1749. border-radius: 5px;
  1750. color: var(--primary);
  1751. background: var(--chalk);
  1752. }
  1753. .cart-action-group h6 {
  1754. font-weight: 500;
  1755. color: var(--primary);
  1756. }
  1757. .cart-footer {
  1758. padding: 20px 15px 0px;
  1759. text-align: center;
  1760. -webkit-box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08);
  1761. box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08);
  1762. }
  1763. .coupon-btn {
  1764. font-weight: 500;
  1765. margin-bottom: 20px;
  1766. color: var(--black);
  1767. text-shadow: var(--primary-tshadow);
  1768. }
  1769. .coupon-btn:hover {
  1770. text-decoration: underline;
  1771. }
  1772. .coupon-form {
  1773. padding: 3px;
  1774. border-radius: 8px;
  1775. margin-bottom: 18px;
  1776. display: -webkit-box;
  1777. display: -ms-flexbox;
  1778. display: flex;
  1779. -webkit-box-align: center;
  1780. -ms-flex-align: center;
  1781. align-items: center;
  1782. -webkit-box-pack: center;
  1783. -ms-flex-pack: center;
  1784. justify-content: center;
  1785. border: 1px solid var(--border);
  1786. -webkit-box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
  1787. box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
  1788. transition: all linear .3s;
  1789. -webkit-transition: all linear .3s;
  1790. -moz-transition: all linear .3s;
  1791. -ms-transition: all linear .3s;
  1792. -o-transition: all linear .3s;
  1793. display: none;
  1794. }
  1795. .coupon-form:focus-within {
  1796. border-color: var(--primary);
  1797. }
  1798. .coupon-form input {
  1799. width: 100%;
  1800. height: 38px;
  1801. padding: 0px 15px;
  1802. }
  1803. .coupon-form button span {
  1804. width: 100px;
  1805. height: 38px;
  1806. font-size: 14px;
  1807. line-height: 38px;
  1808. border-radius: 8px;
  1809. display: block;
  1810. text-align: center;
  1811. text-transform: uppercase;
  1812. color: var(--white);
  1813. background: var(--primary);
  1814. }
  1815. .cart-checkout-btn {
  1816. padding: 10px 0px;
  1817. border-radius: 8px;
  1818. background: var(--black);
  1819. display: -webkit-box;
  1820. display: -ms-flexbox;
  1821. display: flex;
  1822. -webkit-box-align: center;
  1823. -ms-flex-align: center;
  1824. align-items: center;
  1825. -webkit-box-pack: center;
  1826. -ms-flex-pack: center;
  1827. justify-content: center;
  1828. transition: all linear .3s;
  1829. -webkit-transition: all linear .3s;
  1830. -moz-transition: all linear .3s;
  1831. -ms-transition: all linear .3s;
  1832. -o-transition: all linear .3s;
  1833. }
  1834. .cart-checkout-btn:hover {
  1835. background: var(--heading);
  1836. }
  1837. .checkout-label {
  1838. width: 100%;
  1839. height: 30px;
  1840. font-size: 15px;
  1841. line-height: 30px;
  1842. letter-spacing: 0.3px;
  1843. text-align: center;
  1844. text-transform: capitalize;
  1845. color: var(--white);
  1846. }
  1847. .checkout-price {
  1848. padding: 0px 25px;
  1849. letter-spacing: 0.3px;
  1850. color: var(--white);
  1851. border-left: 1px solid var(--border);
  1852. }
  1853. @media (max-width: 450px) {
  1854. .cart-sidebar {
  1855. right: 0px;
  1856. width: 100%;
  1857. height: 100vh;
  1858. -webkit-transform: scale(0);
  1859. transform: scale(0);
  1860. margin: 80px 0px 0px;
  1861. border-radius: 15px 15px 0px 0px;
  1862. transition: all linear .3s;
  1863. -webkit-transition: all linear .3s;
  1864. -moz-transition: all linear .3s;
  1865. -ms-transition: all linear .3s;
  1866. -o-transition: all linear .3s;
  1867. }
  1868. .cart-sidebar.active {
  1869. -webkit-transform: scale(1);
  1870. transform: scale(1);
  1871. -webkit-transform-origin: top;
  1872. transform-origin: top;
  1873. }
  1874. .cart-close {
  1875. left: 50%;
  1876. top: -45px;
  1877. bottom: inherit;
  1878. -webkit-transform: translateX(-50%);
  1879. transform: translateX(-50%);
  1880. border-radius: 50px 50px 0px 0px;
  1881. -webkit-box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.15);
  1882. box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.15);
  1883. }
  1884. .cart-list {
  1885. max-height: calc(100vh - 290px);
  1886. }
  1887. .cart-media a img {
  1888. width: 80px;
  1889. }
  1890. }
  1891. .category-sidebar {
  1892. position: fixed;
  1893. top: 0px;
  1894. left: -320px;
  1895. width: 280px;
  1896. height: 100vh;
  1897. z-index: 5;
  1898. background: var(--white);
  1899. -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1900. box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1901. transition: all linear .3s;
  1902. -webkit-transition: all linear .3s;
  1903. -moz-transition: all linear .3s;
  1904. -ms-transition: all linear .3s;
  1905. -o-transition: all linear .3s;
  1906. }
  1907. .category-sidebar.active {
  1908. left: 0px;
  1909. }
  1910. .category-header {
  1911. padding: 15px 18px;
  1912. position: relative;
  1913. border-bottom: 1px solid var(--border);
  1914. display: -webkit-box;
  1915. display: -ms-flexbox;
  1916. display: flex;
  1917. -webkit-box-align: center;
  1918. -ms-flex-align: center;
  1919. align-items: center;
  1920. -webkit-box-pack: start;
  1921. -ms-flex-pack: start;
  1922. justify-content: flex-start;
  1923. }
  1924. .category-title {
  1925. color: var(--primary);
  1926. text-transform: capitalize;
  1927. display: -webkit-box;
  1928. display: -ms-flexbox;
  1929. display: flex;
  1930. -webkit-box-align: center;
  1931. -ms-flex-align: center;
  1932. align-items: center;
  1933. -webkit-box-pack: start;
  1934. -ms-flex-pack: start;
  1935. justify-content: flex-start;
  1936. }
  1937. .category-title i {
  1938. margin-right: 8px;
  1939. }
  1940. .category-close {
  1941. position: absolute;
  1942. top: 50%;
  1943. right: -18px;
  1944. -webkit-transform: translateY(-50%);
  1945. transform: translateY(-50%);
  1946. }
  1947. .category-close i {
  1948. width: 35px;
  1949. height: 35px;
  1950. font-size: 18px;
  1951. line-height: 35px;
  1952. border-radius: 50%;
  1953. text-align: center;
  1954. display: inline-block;
  1955. color: var(--text);
  1956. background: var(--white);
  1957. text-shadow: var(--primary-tshadow);
  1958. transition: all linear .3s;
  1959. -webkit-transition: all linear .3s;
  1960. -moz-transition: all linear .3s;
  1961. -ms-transition: all linear .3s;
  1962. -o-transition: all linear .3s;
  1963. }
  1964. .category-close i:hover {
  1965. color: var(--white);
  1966. background: var(--primary);
  1967. }
  1968. .category-list {
  1969. width: 100%;
  1970. padding: 0px 15px;
  1971. overflow-y: scroll;
  1972. height: calc(100vh - 130px);
  1973. }
  1974. .category-item {
  1975. width: 100%;
  1976. border-bottom: 1px solid var(--border);
  1977. }
  1978. .category-link {
  1979. font-size: 16px;
  1980. font-weight: 400;
  1981. padding: 12px 15px;
  1982. color: var(--text);
  1983. text-transform: capitalize;
  1984. display: -webkit-box;
  1985. display: -ms-flexbox;
  1986. display: flex;
  1987. -webkit-box-align: center;
  1988. -ms-flex-align: center;
  1989. align-items: center;
  1990. -webkit-box-pack: start;
  1991. -ms-flex-pack: start;
  1992. justify-content: flex-start;
  1993. transition: all linear .3s;
  1994. -webkit-transition: all linear .3s;
  1995. -moz-transition: all linear .3s;
  1996. -ms-transition: all linear .3s;
  1997. -o-transition: all linear .3s;
  1998. }
  1999. .category-link i {
  2000. font-size: 25px;
  2001. margin-right: 15px;
  2002. display: inline-block;
  2003. }
  2004. .category-footer {
  2005. text-align: center;
  2006. margin-top: 20px;
  2007. }
  2008. .category-footer p {
  2009. font-size: 14px;
  2010. color: var(--gray);
  2011. }
  2012. .category-footer p a {
  2013. color: var(--primary);
  2014. }
  2015. .mobile-menu {
  2016. position: fixed;
  2017. bottom: 0px;
  2018. left: 0px;
  2019. width: 100%;
  2020. z-index: 3;
  2021. background: var(--white);
  2022. border-radius: 10px 10px 0px 0px;
  2023. -webkit-box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);
  2024. box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);
  2025. display: -webkit-box;
  2026. display: -ms-flexbox;
  2027. display: flex;
  2028. -webkit-box-align: center;
  2029. -ms-flex-align: center;
  2030. align-items: center;
  2031. -webkit-box-pack: center;
  2032. -ms-flex-pack: center;
  2033. justify-content: center;
  2034. -webkit-box-pack: justify;
  2035. -ms-flex-pack: justify;
  2036. justify-content: space-between;
  2037. display: none;
  2038. }
  2039. .mobile-menu a,
  2040. .mobile-menu button {
  2041. display: -webkit-box;
  2042. display: -ms-flexbox;
  2043. display: flex;
  2044. -webkit-box-align: center;
  2045. -ms-flex-align: center;
  2046. align-items: center;
  2047. -webkit-box-pack: center;
  2048. -ms-flex-pack: center;
  2049. justify-content: center;
  2050. -webkit-box-orient: vertical;
  2051. -webkit-box-direction: normal;
  2052. -ms-flex-direction: column;
  2053. flex-direction: column;
  2054. width: 80px;
  2055. padding: 8px 0px;
  2056. border-radius: 8px;
  2057. position: relative;
  2058. }
  2059. .mobile-menu a:hover,
  2060. .mobile-menu button:hover {
  2061. background: var(--chalk);
  2062. }
  2063. .mobile-menu a:hover i,
  2064. .mobile-menu button:hover i {
  2065. color: var(--primary);
  2066. }
  2067. .mobile-menu a:hover span,
  2068. .mobile-menu button:hover span {
  2069. color: var(--primary);
  2070. }
  2071. .mobile-menu a i,
  2072. .mobile-menu button i {
  2073. font-size: 15px;
  2074. margin-bottom: 5px;
  2075. color: var(--text);
  2076. text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
  2077. }
  2078. .mobile-menu a span,
  2079. .mobile-menu button span {
  2080. font-size: 10px;
  2081. line-height: 12px;
  2082. color: var(--text);
  2083. text-transform: uppercase;
  2084. }
  2085. .mobile-menu a sup,
  2086. .mobile-menu button sup {
  2087. position: absolute;
  2088. top: -5px;
  2089. left: 75%;
  2090. width: 24px;
  2091. height: 24px;
  2092. font-size: 12px;
  2093. line-height: 20px;
  2094. border-radius: 50%;
  2095. text-align: center;
  2096. -webkit-transform: translateX(-50%);
  2097. transform: translateX(-50%);
  2098. color: var(--white);
  2099. background: var(--primary);
  2100. border: 2px solid var(--green-chalk);
  2101. text-shadow: var(--primary-tshadow);
  2102. }
  2103. .mobile-menu a .fas fa-shopping-basket,
  2104. .mobile-menu button .fas fa-shopping-basket {
  2105. font-size: 18px;
  2106. }
  2107. @media (max-width: 991px) {
  2108. .mobile-menu {
  2109. display: -webkit-box;
  2110. display: -ms-flexbox;
  2111. display: flex;
  2112. }
  2113. }
  2114. .product-view {
  2115. max-width: 1000px;
  2116. border-radius: 8px;
  2117. background: var(--white);
  2118. }
  2119. .view-gallery {
  2120. margin: 30px;
  2121. position: relative;
  2122. }
  2123. .view-label-group {
  2124. position: absolute;
  2125. top: 0px;
  2126. left: 0px;
  2127. z-index: 1;
  2128. display: -webkit-box;
  2129. display: -ms-flexbox;
  2130. display: flex;
  2131. -webkit-box-orient: vertical;
  2132. -webkit-box-direction: normal;
  2133. -ms-flex-direction: column;
  2134. flex-direction: column;
  2135. }
  2136. .view-label {
  2137. font-size: 14px;
  2138. padding: 6px 20px;
  2139. margin-bottom: 6px;
  2140. line-height: 13px;
  2141. border-radius: 50px;
  2142. text-align: center;
  2143. text-transform: capitalize;
  2144. color: var(--white);
  2145. }
  2146. .view-label:last-child {
  2147. margin-bottom: 0px;
  2148. }
  2149. .view-label.off {
  2150. background: var(--black);
  2151. }
  2152. .view-label.new {
  2153. background: var(--black);
  2154. }
  2155. .view-label.sale {
  2156. background: var(--orange);
  2157. }
  2158. .view-label.feat {
  2159. background: var(--purple);
  2160. }
  2161. .view-label.rate {
  2162. background: var(--yellow);
  2163. }
  2164. .view-details {
  2165. margin: 30px;
  2166. }
  2167. .view-name {
  2168. font-size: 26px;
  2169. line-height: 34px;
  2170. margin-bottom: 5px;
  2171. text-transform: capitalize;
  2172. }
  2173. .view-name a {
  2174. color: var(--heading);
  2175. }
  2176. .view-name a:hover {
  2177. color: var(--primary);
  2178. }
  2179. .view-meta {
  2180. margin-bottom: 12px;
  2181. display: -webkit-box;
  2182. display: -ms-flexbox;
  2183. display: flex;
  2184. -webkit-box-align: center;
  2185. -ms-flex-align: center;
  2186. align-items: center;
  2187. -webkit-box-pack: start;
  2188. -ms-flex-pack: start;
  2189. justify-content: flex-start;
  2190. }
  2191. .view-meta p {
  2192. font-size: 13px;
  2193. margin-right: 20px;
  2194. text-transform: uppercase;
  2195. color: var(--placeholder);
  2196. }
  2197. .view-meta span,
  2198. .view-meta a {
  2199. margin-left: 5px;
  2200. color: var(--placeholder);
  2201. }
  2202. .view-meta a:hover {
  2203. text-decoration: underline;
  2204. color: var(--primary);
  2205. }
  2206. .view-rating {
  2207. display: -webkit-box;
  2208. display: -ms-flexbox;
  2209. display: flex;
  2210. -webkit-box-align: center;
  2211. -ms-flex-align: center;
  2212. align-items: center;
  2213. -webkit-box-pack: start;
  2214. -ms-flex-pack: start;
  2215. justify-content: flex-start;
  2216. margin-bottom: 15px;
  2217. }
  2218. .view-rating i,
  2219. .view-rating a {
  2220. font-size: 15px;
  2221. margin-right: 3px;
  2222. color: var(--gray);
  2223. }
  2224. .view-rating a {
  2225. margin-left: 8px;
  2226. white-space: nowrap;
  2227. text-transform: capitalize;
  2228. transition: all linear .3s;
  2229. -webkit-transition: all linear .3s;
  2230. -moz-transition: all linear .3s;
  2231. -ms-transition: all linear .3s;
  2232. -o-transition: all linear .3s;
  2233. }
  2234. .view-rating a:hover {
  2235. color: var(--primary);
  2236. text-decoration: underline;
  2237. }
  2238. .view-rating .active {
  2239. color: var(--yellow);
  2240. }
  2241. .view-price {
  2242. margin-bottom: 20px;
  2243. }
  2244. .view-price del {
  2245. color: var(--red);
  2246. margin-right: 25px;
  2247. }
  2248. .view-price span {
  2249. color: var(--primary);
  2250. }
  2251. .view-price span small {
  2252. font-size: 14px;
  2253. font-weight: 400;
  2254. text-transform: capitalize;
  2255. }
  2256. .view-desc {
  2257. margin-bottom: 25px;
  2258. }
  2259. .view-list-group {
  2260. display: -webkit-box;
  2261. display: -ms-flexbox;
  2262. display: flex;
  2263. -webkit-box-align: center;
  2264. -ms-flex-align: center;
  2265. align-items: center;
  2266. -webkit-box-pack: center;
  2267. -ms-flex-pack: center;
  2268. justify-content: center;
  2269. -webkit-box-pack: start;
  2270. -ms-flex-pack: start;
  2271. justify-content: flex-start;
  2272. margin-bottom: 25px;
  2273. }
  2274. .view-list-group:last-child {
  2275. margin-bottom: 0px;
  2276. }
  2277. .view-list-title {
  2278. font-weight: 500;
  2279. margin-right: 15px;
  2280. color: var(--heading);
  2281. text-transform: capitalize;
  2282. }
  2283. .view-tag-list {
  2284. display: -webkit-box;
  2285. display: -ms-flexbox;
  2286. display: flex;
  2287. -webkit-box-align: center;
  2288. -ms-flex-align: center;
  2289. align-items: center;
  2290. -webkit-box-pack: center;
  2291. -ms-flex-pack: center;
  2292. justify-content: center;
  2293. }
  2294. .view-tag-list li {
  2295. margin-right: 8px;
  2296. }
  2297. .view-tag-list li a {
  2298. font-size: 14px;
  2299. line-height: 12px;
  2300. padding: 8px 10px;
  2301. border-radius: 5px;
  2302. letter-spacing: 0.3px;
  2303. text-transform: capitalize;
  2304. color: var(--text);
  2305. background: var(--chalk);
  2306. transition: all linear .3s;
  2307. -webkit-transition: all linear .3s;
  2308. -moz-transition: all linear .3s;
  2309. -ms-transition: all linear .3s;
  2310. -o-transition: all linear .3s;
  2311. }
  2312. .view-tag-list li a:hover {
  2313. color: var(--white);
  2314. background: var(--primary);
  2315. }
  2316. .view-share-list {
  2317. display: -webkit-box;
  2318. display: -ms-flexbox;
  2319. display: flex;
  2320. -webkit-box-align: center;
  2321. -ms-flex-align: center;
  2322. align-items: center;
  2323. -webkit-box-pack: center;
  2324. -ms-flex-pack: center;
  2325. justify-content: center;
  2326. }
  2327. .view-share-list li {
  2328. margin-right: 8px;
  2329. }
  2330. .view-share-list li a {
  2331. width: 35px;
  2332. height: 35px;
  2333. font-size: 16px;
  2334. line-height: 35px;
  2335. border-radius: 50%;
  2336. text-align: center;
  2337. color: var(--text);
  2338. background: var(--chalk);
  2339. transition: all linear .3s;
  2340. -webkit-transition: all linear .3s;
  2341. -moz-transition: all linear .3s;
  2342. -ms-transition: all linear .3s;
  2343. -o-transition: all linear .3s;
  2344. }
  2345. .view-share-list li a:hover {
  2346. color: var(--white);
  2347. background: var(--primary);
  2348. }
  2349. .view-add-group {
  2350. margin: 45px 0px 15px;
  2351. }
  2352. .view-add-group .product-add,
  2353. .view-add-group .action-input {
  2354. height: 46px;
  2355. line-height: 46px;
  2356. letter-spacing: 0.3px;
  2357. text-transform: uppercase;
  2358. color: var(--white);
  2359. background: var(--black);
  2360. }
  2361. .view-action-group {
  2362. display: -ms-grid;
  2363. display: grid;
  2364. grid-gap: 15px;
  2365. -ms-grid-columns: (minmax(200px, 1fr))[auto-fit];
  2366. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  2367. position: relative;
  2368. }
  2369. .view-action-group a {
  2370. padding: 10px 0px;
  2371. border-radius: 8px;
  2372. color: var(--text);
  2373. background: var(--border);
  2374. display: -webkit-box;
  2375. display: -ms-flexbox;
  2376. display: flex;
  2377. -webkit-box-align: center;
  2378. -ms-flex-align: center;
  2379. align-items: center;
  2380. -webkit-box-pack: center;
  2381. -ms-flex-pack: center;
  2382. justify-content: center;
  2383. transition: all linear .3s;
  2384. -webkit-transition: all linear .3s;
  2385. -moz-transition: all linear .3s;
  2386. -ms-transition: all linear .3s;
  2387. -o-transition: all linear .3s;
  2388. }
  2389. .view-action-group a i {
  2390. font-size: 16px;
  2391. margin-right: 8px;
  2392. }
  2393. .view-action-group a span {
  2394. font-size: 14px;
  2395. font-weight: 500;
  2396. letter-spacing: 0.5px;
  2397. text-transform: uppercase;
  2398. }
  2399. .view-wish.active {
  2400. color: var(--white);
  2401. background: var(--primary);
  2402. }
  2403. .preview-slider {
  2404. margin-bottom: 20px;
  2405. }
  2406. .preview-slider li img {
  2407. width: 100%;
  2408. border-radius: 8px;
  2409. }
  2410. .thumb-slider li {
  2411. margin: 0px 10px;
  2412. cursor: pointer;
  2413. }
  2414. .thumb-slider li img {
  2415. width: 100%;
  2416. border-radius: 8px;
  2417. border: 1px solid var(--border);
  2418. }
  2419. .thumb-slider .slick-center img {
  2420. border: 1px solid var(--primary);
  2421. }
  2422. @media (max-width: 500px) {
  2423. .view-gallery,
  2424. .view-details {
  2425. margin: 25px;
  2426. }
  2427. .view-list-group {
  2428. -webkit-box-align: start;
  2429. -ms-flex-align: start;
  2430. align-items: flex-start;
  2431. -webkit-box-orient: vertical;
  2432. -webkit-box-direction: normal;
  2433. -ms-flex-direction: column;
  2434. flex-direction: column;
  2435. }
  2436. .view-list-title {
  2437. margin: 0px 0px 10px;
  2438. }
  2439. }
  2440. @media (max-width: 767px) {
  2441. .product-view {
  2442. max-width: 480px;
  2443. }
  2444. }
  2445. .countdown-part {
  2446. padding: 80px 0px;
  2447. background: -webkit-gradient(linear, right top, left top, from(#c3ffda), to(#a1f3c0));
  2448. background: linear-gradient(to left, #c3ffda, #a1f3c0);
  2449. }
  2450. .countdown-content {
  2451. text-align: center;
  2452. }
  2453. .countdown-content h3 {
  2454. font-size: 40px;
  2455. font-weight: 700;
  2456. line-height: 48px;
  2457. text-transform: uppercase;
  2458. margin-bottom: 12px;
  2459. }
  2460. .countdown-content p {
  2461. margin-bottom: 38px;
  2462. }
  2463. .countdown-clock {
  2464. margin-bottom: 45px;
  2465. }
  2466. .countdown-img {
  2467. position: relative;
  2468. }
  2469. .countdown-img img {
  2470. width: 100%;
  2471. }
  2472. .countdown-off {
  2473. width: 120px;
  2474. height: 120px;
  2475. border-radius: 50%;
  2476. padding: 35px 30px 30px;
  2477. background: var(--red);
  2478. position: absolute;
  2479. top: 0px;
  2480. left: 0px;
  2481. }
  2482. .countdown-off span {
  2483. display: block;
  2484. text-transform: uppercase;
  2485. font-size: 30px;
  2486. font-weight: 500;
  2487. letter-spacing: 0.5px;
  2488. color: var(--white);
  2489. }
  2490. @media (max-width: 767px) {
  2491. .countdown-part {
  2492. padding: 60px 0px;
  2493. }
  2494. .countdown-img {
  2495. margin-top: 30px;
  2496. }
  2497. }
  2498. .news-part {
  2499. background-size: cover !important;
  2500. padding: 70px 0px;
  2501. position: relative;
  2502. z-index: 1;
  2503. }
  2504. .news-part::before {
  2505. position: absolute;
  2506. content: "";
  2507. top: 0px;
  2508. left: 0px;
  2509. width: 100%;
  2510. height: 100%;
  2511. background: -webkit-gradient(linear, left top, right top, from(rgba(6, 23, 56, 0.8)), to(rgba(17, 151, 68, 0.8)));
  2512. background: linear-gradient(to right, rgba(6, 23, 56, 0.8), rgba(17, 151, 68, 0.8));
  2513. z-index: -1;
  2514. }
  2515. .news-text h2 {
  2516. font-size: 35px;
  2517. color: var(--white);
  2518. margin-bottom: 5px;
  2519. }
  2520. .news-text p {
  2521. font-size: 18px;
  2522. font-weight: 300;
  2523. color: var(--white);
  2524. }
  2525. .news-form {
  2526. width: 100%;
  2527. padding: 6px;
  2528. border-radius: 8px;
  2529. background: var(--white);
  2530. display: -webkit-box;
  2531. display: -ms-flexbox;
  2532. display: flex;
  2533. -webkit-box-align: center;
  2534. -ms-flex-align: center;
  2535. align-items: center;
  2536. -webkit-box-pack: center;
  2537. -ms-flex-pack: center;
  2538. justify-content: center;
  2539. }
  2540. .news-form input {
  2541. width: 100%;
  2542. height: 50px;
  2543. padding: 0px 20px;
  2544. line-height: 50px;
  2545. }
  2546. .news-form button span {
  2547. width: 180px;
  2548. font-size: 14px;
  2549. font-weight: 500;
  2550. padding: 12px 0px;
  2551. border-radius: 8px;
  2552. text-align: center;
  2553. display: inline-block;
  2554. text-transform: uppercase;
  2555. color: var(--white);
  2556. background: var(--primary);
  2557. }
  2558. .news-form button span i {
  2559. margin-right: 5px;
  2560. }
  2561. @media (max-width: 575px) {
  2562. .news-form {
  2563. -webkit-box-orient: vertical;
  2564. -webkit-box-direction: normal;
  2565. -ms-flex-direction: column;
  2566. flex-direction: column;
  2567. }
  2568. }
  2569. @media (max-width: 767px) {
  2570. .news-text {
  2571. margin-bottom: 30px;
  2572. }
  2573. }
  2574. @media (max-width: 991px) {
  2575. .news-part {
  2576. padding: 50px 30px 60px;
  2577. }
  2578. .news-part .container-fluid {
  2579. padding: 0px;
  2580. }
  2581. }
  2582. .intro-part {
  2583. padding: 80px 0px;
  2584. background: #f5f6f7;
  2585. }
  2586. .intro-wrap {
  2587. display: -webkit-box;
  2588. display: -ms-flexbox;
  2589. display: flex;
  2590. -webkit-box-align: start;
  2591. -ms-flex-align: start;
  2592. align-items: flex-start;
  2593. -webkit-box-pack: start;
  2594. -ms-flex-pack: start;
  2595. justify-content: flex-start;
  2596. }
  2597. .intro-wrap:hover .intro-icon i {
  2598. color: var(--white);
  2599. background: var(--black);
  2600. }
  2601. .intro-icon {
  2602. margin-right: 20px;
  2603. }
  2604. .intro-icon i {
  2605. width: 50px;
  2606. height: 50px;
  2607. font-size: 18px;
  2608. line-height: 43px;
  2609. border-radius: 50%;
  2610. text-align: center;
  2611. display: inline-block;
  2612. color: var(--black);
  2613. background: var(--white);
  2614. border: 3px double var(--black);
  2615. -webkit-box-shadow: var(--primary-bshadow);
  2616. box-shadow: var(--primary-bshadow);
  2617. transition: all linear .3s;
  2618. -webkit-transition: all linear .3s;
  2619. -moz-transition: all linear .3s;
  2620. -ms-transition: all linear .3s;
  2621. -o-transition: all linear .3s;
  2622. }
  2623. .intro-content h5 {
  2624. font-size: 17px;
  2625. margin-bottom: 8px;
  2626. text-transform: capitalize;
  2627. color:var(--black);
  2628. }
  2629. .intro-content p {
  2630. font-size: 15px;
  2631. line-height: 22px;
  2632. color:var(--black);
  2633. word-break:keep-all;
  2634. }
  2635. @media (max-width: 767px) {
  2636. .intro-part {
  2637. padding: 60px 0px 30px;
  2638. }
  2639. .intro-wrap {
  2640. margin-bottom: 30px;
  2641. }
  2642. }
  2643. @media (min-width: 768px) and (max-width: 991px) {
  2644. .intro-part {
  2645. padding: 80px 0px 50px;
  2646. }
  2647. .intro-wrap {
  2648. margin-bottom: 30px;
  2649. }
  2650. }
  2651. /*=====================================
  2652. FOOTER PART STYLE
  2653. ======================================*/
  2654. .footer-part { }
  2655. .footer-part .ft_top {padding:25px 0 15px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;}
  2656. .footer-part .ft_top .container {display:flex; justify-content:space-between;}
  2657. .footer-part .ft_top .fcc {display:flex;}
  2658. .footer-part .ft_top .tel, .footer-part .ft_top .online a {display:flex; flex-flow:column wrap; font-size:18px; font-weight:500; color:var(--black);}
  2659. .footer-part .ft_top .tel {margin-right:50px;}
  2660. .footer-part .ft_top .fcc em {font-size:14px; color:#807f7f; font-weight:400; font-style:normal;}
  2661. .footer-part .ft_top .fcc .tel {font-size:24px; font-weight:700; color:var(--black);}
  2662. .footer-part .ft_top .ft_menu a {margin-left:20px; font-size:14px; color:var(--black);}
  2663. .footer-part .ft_btm {padding:24px 0 40px; color:#9a9a9a; font-size:14px; font-weight:300; line-height:1.4;}
  2664. .footer-widget {
  2665. display: -ms-grid;
  2666. display: grid;
  2667. -ms-grid-columns: 100%;
  2668. grid-template-columns: 100%;
  2669. }
  2670. .footer-logo {
  2671. margin-bottom: 25px;
  2672. }
  2673. .footer-logo img {
  2674. width: 180px;
  2675. }
  2676. .footer-desc {
  2677. margin-bottom: 30px;
  2678. }
  2679. .footer-social li {
  2680. display: inline-block;
  2681. margin-right: 7px;
  2682. }
  2683. .footer-social li:last-child {
  2684. margin-right: 0px;
  2685. }
  2686. .footer-social li a {
  2687. width: 40px;
  2688. height: 40px;
  2689. font-size: 16px;
  2690. line-height: 40px;
  2691. border-radius: 50%;
  2692. text-align: center;
  2693. color: var(--primary);
  2694. background: var(--white);
  2695. text-shadow: var(--primary-tshadow);
  2696. -webkit-box-shadow: var(--primary-bshadow);
  2697. box-shadow: var(--primary-bshadow);
  2698. transition: all linear .3s;
  2699. -webkit-transition: all linear .3s;
  2700. -moz-transition: all linear .3s;
  2701. -ms-transition: all linear .3s;
  2702. -o-transition: all linear .3s;
  2703. }
  2704. .footer-social li a:hover {
  2705. color: var(--white);
  2706. background: var(--primary);
  2707. }
  2708. .footer-title {
  2709. margin-bottom: 25px;
  2710. letter-spacing: -0.3px;
  2711. text-transform: capitalize;
  2712. }
  2713. .footer-widget.contact {
  2714. margin-left: 30px;
  2715. }
  2716. .footer-contact li {
  2717. display: -webkit-box;
  2718. display: -ms-flexbox;
  2719. display: flex;
  2720. -webkit-box-align: center;
  2721. -ms-flex-align: center;
  2722. align-items: center;
  2723. margin-bottom: 18px;
  2724. }
  2725. .footer-contact li:last-child {
  2726. margin-bottom: 0px;
  2727. }
  2728. .footer-contact li i {
  2729. font-size: 30px;
  2730. margin-right: 15px;
  2731. color: var(--primary);
  2732. }
  2733. .footer-contact li p span {
  2734. display: block;
  2735. }
  2736. .footer-links {
  2737. display: -ms-grid;
  2738. display: grid;
  2739. grid-gap: 50px;
  2740. -ms-grid-columns: 1fr 1fr;
  2741. grid-template-columns: 1fr 1fr;
  2742. }
  2743. .footer-links ul li {
  2744. margin-bottom: 15px;
  2745. }
  2746. .footer-links ul li:last-child {
  2747. margin-bottom: 0px;
  2748. }
  2749. .footer-links ul li a {
  2750. color: var(--text);
  2751. text-transform: capitalize;
  2752. transition: all linear .3s;
  2753. -webkit-transition: all linear .3s;
  2754. -moz-transition: all linear .3s;
  2755. -ms-transition: all linear .3s;
  2756. -o-transition: all linear .3s;
  2757. }
  2758. .footer-links ul li a:hover {
  2759. color: var(--primary);
  2760. text-decoration: underline;
  2761. }
  2762. .footer-app {
  2763. display: -ms-grid;
  2764. display: grid;
  2765. grid-gap: 10px;
  2766. -ms-grid-columns: 1fr 1fr;
  2767. grid-template-columns: 1fr 1fr;
  2768. }
  2769. .footer-app a img {
  2770. width: 100%;
  2771. }
  2772. .footer-bottom {
  2773. margin-top: 75px;
  2774. padding: 20px 35px 15px;
  2775. border-radius: 8px 8px 0px 0px;
  2776. background: var(--primary);
  2777. border-top: 1px solid var(--border);
  2778. display: -webkit-box;
  2779. display: -ms-flexbox;
  2780. display: flex;
  2781. -webkit-box-align: center;
  2782. -ms-flex-align: center;
  2783. align-items: center;
  2784. -webkit-box-pack: justify;
  2785. -ms-flex-pack: justify;
  2786. justify-content: space-between;
  2787. }
  2788. .footer-copytext {
  2789. font-size: 15px;
  2790. color: var(--white);
  2791. }
  2792. .footer-copytext a {
  2793. color: var(--green-chalk);
  2794. }
  2795. .footer-copytext a:hover {
  2796. text-decoration: underline;
  2797. }
  2798. .footer-card a {
  2799. margin-left: 10px;
  2800. }
  2801. .footer-card a img {
  2802. width: 50px;
  2803. border-radius: 3px;
  2804. }
  2805. @media (max-width: 768px) {
  2806. .footer-part .container-fluid {
  2807. padding: 0px 25px;
  2808. }
  2809. .footer-widget.contact {
  2810. margin-left: 0px;
  2811. }
  2812. }
  2813. @media (max-width: 1199px) {
  2814. .footer-part {
  2815. padding-top: 0;
  2816. }
  2817. .footer-widget {
  2818. margin-bottom: 40px;
  2819. }
  2820. .footer-bottom {
  2821. margin-top: 10px;
  2822. }
  2823. }
  2824. @media (max-width: 767px) {
  2825. .footer-bottom {
  2826. padding: 25px 15px 75px;
  2827. -webkit-box-orient: vertical;
  2828. -webkit-box-direction: normal;
  2829. -ms-flex-direction: column;
  2830. flex-direction: column;
  2831. text-align: center;
  2832. }
  2833. .footer-copytext {
  2834. margin-bottom: 10px;
  2835. }
  2836. .footer-card a {
  2837. margin: 0px 3px;
  2838. }
  2839. }
  2840. @media (min-width: 768px) and (max-width: 991px) {
  2841. .footer-bottom {
  2842. padding: 25px 30px 75px;
  2843. }
  2844. }
  2845. .blog-widget {
  2846. margin-bottom: 30px;
  2847. margin-left: 5px;
  2848. border-radius: 8px;
  2849. padding: 18px 25px 25px;
  2850. background: var(--white);
  2851. }
  2852. .blog-widget:last-child {
  2853. margin-bottom: 0px;
  2854. }
  2855. .blog-widget-title {
  2856. padding-bottom: 16px;
  2857. margin-bottom: 20px;
  2858. position: relative;
  2859. text-transform: capitalize;
  2860. border-bottom: 1px solid var(--border);
  2861. }
  2862. .blog-widget-title::before {
  2863. position: absolute;
  2864. content: "";
  2865. bottom: -2px;
  2866. left: 0px;
  2867. width: 50px;
  2868. height: 2px;
  2869. background: var(--primary);
  2870. }
  2871. .blog-widget-form {
  2872. position: relative;
  2873. }
  2874. .blog-widget-form input {
  2875. width: 100%;
  2876. height: 45px;
  2877. padding: 0px 15px 0px 60px;
  2878. border-radius: 8px;
  2879. background: var(--chalk);
  2880. border: 1px solid var(--border);
  2881. transition: all linear .3s;
  2882. -webkit-transition: all linear .3s;
  2883. -moz-transition: all linear .3s;
  2884. -ms-transition: all linear .3s;
  2885. -o-transition: all linear .3s;
  2886. }
  2887. .blog-widget-form input:focus-within {
  2888. border-color: var(--primary);
  2889. }
  2890. .blog-widget-form button {
  2891. position: absolute;
  2892. top: 0px;
  2893. left: 0px;
  2894. width: 45px;
  2895. height: 45px;
  2896. line-height: 45px;
  2897. text-align: center;
  2898. color: var(--white);
  2899. background: var(--primary);
  2900. border-radius: 8px 0px 0px 8px;
  2901. }
  2902. .blog-widget-feed li {
  2903. display: -webkit-box;
  2904. display: -ms-flexbox;
  2905. display: flex;
  2906. margin-bottom: 25px;
  2907. padding-bottom: 25px;
  2908. border-bottom: 1px solid var(--border);
  2909. }
  2910. .blog-widget-feed li:last-child {
  2911. margin: 0px;
  2912. padding: 0px;
  2913. border: none;
  2914. }
  2915. .blog-widget-media img {
  2916. width: 100px;
  2917. border-radius: 8px;
  2918. margin-right: 20px;
  2919. transition: all linear .3s;
  2920. -webkit-transition: all linear .3s;
  2921. -moz-transition: all linear .3s;
  2922. -ms-transition: all linear .3s;
  2923. -o-transition: all linear .3s;
  2924. }
  2925. .blog-widget-text {
  2926. font-size: 17px;
  2927. line-height: 24px;
  2928. }
  2929. .blog-widget-text a {
  2930. color: var(--heading);
  2931. transition: all linear .3s;
  2932. -webkit-transition: all linear .3s;
  2933. -moz-transition: all linear .3s;
  2934. -ms-transition: all linear .3s;
  2935. -o-transition: all linear .3s;
  2936. }
  2937. .blog-widget-text a:hover {
  2938. color: var(--primary);
  2939. }
  2940. .blog-widget-text span {
  2941. display: block;
  2942. margin-top: 8px;
  2943. font-size: 13px;
  2944. font-weight: 400;
  2945. text-transform: uppercase;
  2946. }
  2947. .blog-widget-category li {
  2948. margin-bottom: 15px;
  2949. padding-bottom: 15px;
  2950. border-bottom: 1px solid var(--border);
  2951. }
  2952. .blog-widget-category li:last-child {
  2953. margin: 0px;
  2954. padding: 0px;
  2955. border: none;
  2956. }
  2957. .blog-widget-category li:hover a {
  2958. color: var(--primary);
  2959. }
  2960. .blog-widget-category li:hover a span {
  2961. background: var(--primary);
  2962. }
  2963. .blog-widget-category li a {
  2964. width: 100%;
  2965. font-size: 17px;
  2966. color: var(--text);
  2967. text-transform: capitalize;
  2968. transition: all linear .3s;
  2969. -webkit-transition: all linear .3s;
  2970. -moz-transition: all linear .3s;
  2971. -ms-transition: all linear .3s;
  2972. -o-transition: all linear .3s;
  2973. }
  2974. .blog-widget-category li a span {
  2975. font-size: 14px;
  2976. float: right;
  2977. width: 30px;
  2978. height: 30px;
  2979. line-height: 32px;
  2980. text-align: center;
  2981. border-radius: 50%;
  2982. color: var(--white);
  2983. background: var(--heading);
  2984. transition: all linear .3s;
  2985. -webkit-transition: all linear .3s;
  2986. -moz-transition: all linear .3s;
  2987. -ms-transition: all linear .3s;
  2988. -o-transition: all linear .3s;
  2989. }
  2990. .blog-widget-tag li {
  2991. display: inline-block;
  2992. margin: 0px 8px 12px 0px;
  2993. }
  2994. .blog-widget-tag li a {
  2995. font-size: 14px;
  2996. padding: 5px 12px;
  2997. border-radius: 3px;
  2998. color: var(--text);
  2999. background: var(--chalk);
  3000. text-transform: capitalize;
  3001. transition: all linear .3s;
  3002. -webkit-transition: all linear .3s;
  3003. -moz-transition: all linear .3s;
  3004. -ms-transition: all linear .3s;
  3005. -o-transition: all linear .3s;
  3006. }
  3007. .blog-widget-tag li a:hover {
  3008. color: var(--white);
  3009. background: var(--primary);
  3010. }
  3011. .blog-widget-social li {
  3012. display: inline-block;
  3013. margin-right: 10px;
  3014. }
  3015. .blog-widget-social li a {
  3016. width: 45px;
  3017. height: 45px;
  3018. font-size: 18px;
  3019. line-height: 45px;
  3020. text-align: center;
  3021. border-radius: 3px;
  3022. color: var(--white);
  3023. background: var(--heading);
  3024. transition: all linear .3s;
  3025. -webkit-transition: all linear .3s;
  3026. -moz-transition: all linear .3s;
  3027. -ms-transition: all linear .3s;
  3028. -o-transition: all linear .3s;
  3029. }
  3030. .blog-widget-social li a:hover {
  3031. background: var(--primary);
  3032. }
  3033. @media (max-width: 575px) {
  3034. .blog-widget-social li {
  3035. margin-right: 5px;
  3036. }
  3037. .blog-widget-social li a {
  3038. width: 40px;
  3039. height: 40px;
  3040. font-size: 16px;
  3041. line-height: 40px;
  3042. }
  3043. }
  3044. @media (min-width: 992px) and (max-width: 1199px) {
  3045. .blog-widget-media img {
  3046. width: 95px;
  3047. }
  3048. .blog-widget-social li {
  3049. margin-right: 5px;
  3050. }
  3051. .blog-widget-social li a {
  3052. width: 40px;
  3053. height: 40px;
  3054. font-size: 16px;
  3055. line-height: 40px;
  3056. }
  3057. }
  3058. @media (max-width: 991px) {
  3059. .blog-widget {
  3060. margin-left: 0px;
  3061. }
  3062. }
  3063. .shop-filter {
  3064. padding: 20px 30px;
  3065. border-radius: 8px;
  3066. margin-bottom: 25px;
  3067. background: var(--white);
  3068. border: 1px solid var(--border);
  3069. display: -webkit-box;
  3070. display: -ms-flexbox;
  3071. display: flex;
  3072. -webkit-box-align: center;
  3073. -ms-flex-align: center;
  3074. align-items: center;
  3075. -webkit-box-pack: justify;
  3076. -ms-flex-pack: justify;
  3077. justify-content: space-between;
  3078. }
  3079. .shop-filter .nice-select {
  3080. border-radius: 6px;
  3081. background: var(--chalk);
  3082. padding: 8px 35px 8px 20px;
  3083. border: 1px solid var(--border);
  3084. }
  3085. .shop-filter .nice-select::after {
  3086. right: 20px;
  3087. }
  3088. .shop-filter .nice-select .current {
  3089. font-size: 15px;
  3090. }
  3091. .shop-filter .nice-select .list {
  3092. top: 45px;
  3093. -webkit-box-align: start;
  3094. -ms-flex-align: start;
  3095. align-items: flex-start;
  3096. -webkit-box-orient: vertical;
  3097. -webkit-box-direction: normal;
  3098. -ms-flex-direction: column;
  3099. flex-direction: column;
  3100. }
  3101. .shop-filter ul {
  3102. display: -webkit-box;
  3103. display: -ms-flexbox;
  3104. display: flex;
  3105. -webkit-box-align: center;
  3106. -ms-flex-align: center;
  3107. align-items: center;
  3108. -webkit-box-pack: center;
  3109. -ms-flex-pack: center;
  3110. justify-content: center;
  3111. }
  3112. .shop-filter ul li {
  3113. margin: 0px 5px;
  3114. }
  3115. .shop-filter ul li a {
  3116. width: 40px;
  3117. height: 40px;
  3118. font-size: 16px;
  3119. line-height: 40px;
  3120. border-radius: 50%;
  3121. text-align: center;
  3122. color: var(--text);
  3123. background: var(--chalk);
  3124. }
  3125. .shop-filter ul li .active {
  3126. color: var(--white);
  3127. background: var(--primary);
  3128. }
  3129. .shop-filter p {
  3130. font-size: 15px;
  3131. text-transform: capitalize;
  3132. }
  3133. @media (max-width: 767px) {
  3134. .shop-filter {
  3135. -webkit-box-orient: vertical;
  3136. -webkit-box-direction: normal;
  3137. -ms-flex-direction: column;
  3138. flex-direction: column;
  3139. }
  3140. .shop-filter .nice-select {
  3141. margin-bottom: 15px;
  3142. }
  3143. .shop-filter ul {
  3144. margin-bottom: 15px;
  3145. }
  3146. }
  3147. .shop-widget-promo {
  3148. margin-bottom: 25px;
  3149. border-radius: 8px;
  3150. text-align: center;
  3151. overflow: hidden;
  3152. }
  3153. .shop-widget-promo img {
  3154. width: 100%;
  3155. border-radius: 8px;
  3156. transition: all linear .3s;
  3157. -webkit-transition: all linear .3s;
  3158. -moz-transition: all linear .3s;
  3159. -ms-transition: all linear .3s;
  3160. -o-transition: all linear .3s;
  3161. }
  3162. .shop-widget-promo img:hover {
  3163. -webkit-transform: scale(1.05);
  3164. transform: scale(1.05);
  3165. }
  3166. .shop-widget {
  3167. padding: 20px 20px;
  3168. border-radius: 8px;
  3169. margin-bottom: 25px;
  3170. background: var(--white);
  3171. border: 1px solid var(--white);
  3172. }
  3173. .shop-widget:last-child {
  3174. margin-bottom: 0px;
  3175. }
  3176. .shop-widget-title {
  3177. padding-bottom: 12px;
  3178. text-transform: uppercase;
  3179. border-bottom: 1px solid var(--border);
  3180. }
  3181. .shop-widget-btn {
  3182. width: 100%;
  3183. font-size: 15px;
  3184. padding: 8px 0px;
  3185. border-radius: 8px;
  3186. color: var(--heading);
  3187. background: var(--border);
  3188. display: -webkit-box;
  3189. display: -ms-flexbox;
  3190. display: flex;
  3191. -webkit-box-align: center;
  3192. -ms-flex-align: center;
  3193. align-items: center;
  3194. -webkit-box-pack: center;
  3195. -ms-flex-pack: center;
  3196. justify-content: center;
  3197. transition: all linear .3s;
  3198. -webkit-transition: all linear .3s;
  3199. -moz-transition: all linear .3s;
  3200. -ms-transition: all linear .3s;
  3201. -o-transition: all linear .3s;
  3202. }
  3203. .shop-widget-btn:hover {
  3204. color: var(--white);
  3205. background: var(--primary);
  3206. }
  3207. .shop-widget-btn i {
  3208. margin-right: 8px;
  3209. margin-top: -1px;
  3210. }
  3211. .shop-widget-btn span {
  3212. text-transform: capitalize;
  3213. }
  3214. .shop-widget-group {
  3215. display: -ms-grid;
  3216. display: grid;
  3217. grid-gap: 10px;
  3218. -ms-grid-columns: (1fr)[2];
  3219. grid-template-columns: repeat(2, 1fr);
  3220. -ms-grid-rows: auto;
  3221. grid-template-rows: auto;
  3222. margin: 15px 0px;
  3223. }
  3224. .shop-widget-group input {
  3225. width: 100%;
  3226. height: 45px;
  3227. border-radius: 5px;
  3228. background: var(--chalk);
  3229. text-align: center;
  3230. }
  3231. .shop-widget-list {
  3232. margin: 18px 0px 20px;
  3233. }
  3234. .shop-widget-list li {
  3235. margin-bottom: 12px;
  3236. color: var(--gray);
  3237. display: -webkit-box;
  3238. display: -ms-flexbox;
  3239. display: flex;
  3240. -webkit-box-align: center;
  3241. -ms-flex-align: center;
  3242. align-items: center;
  3243. -webkit-box-pack: justify;
  3244. -ms-flex-pack: justify;
  3245. justify-content: space-between;
  3246. transition: all linear .3s;
  3247. -webkit-transition: all linear .3s;
  3248. -moz-transition: all linear .3s;
  3249. -ms-transition: all linear .3s;
  3250. -o-transition: all linear .3s;
  3251. }
  3252. .shop-widget-list li:hover {
  3253. color: var(--primary);
  3254. }
  3255. .shop-widget-list li:last-child {
  3256. margin-bottom: 0px;
  3257. }
  3258. .shop-widget-content {
  3259. display: -webkit-box;
  3260. display: -ms-flexbox;
  3261. display: flex;
  3262. -webkit-box-align: center;
  3263. -ms-flex-align: center;
  3264. align-items: center;
  3265. -webkit-box-pack: start;
  3266. -ms-flex-pack: start;
  3267. justify-content: flex-start;
  3268. }
  3269. .shop-widget-content input {
  3270. width: 15px;
  3271. height: 15px;
  3272. margin-right: 12px;
  3273. cursor: pointer;
  3274. }
  3275. .shop-widget-content label {
  3276. cursor: pointer;
  3277. display: -webkit-box;
  3278. display: -ms-flexbox;
  3279. display: flex;
  3280. -webkit-box-align: center;
  3281. -ms-flex-align: center;
  3282. align-items: center;
  3283. -webkit-box-pack: center;
  3284. -ms-flex-pack: center;
  3285. justify-content: center;
  3286. text-transform: capitalize;
  3287. }
  3288. .shop-widget-content label i {
  3289. font-size: 15px;
  3290. margin-left: 8px;
  3291. color: var(--gray);
  3292. }
  3293. .shop-widget-content label i:first-child {
  3294. margin-left: 0px;
  3295. }
  3296. .shop-widget-content label i.active {
  3297. color: var(--yellow);
  3298. }
  3299. .shop-widget-number {
  3300. font-size: 15px;
  3301. }
  3302. .shop-widget-search {
  3303. width: 100%;
  3304. height: 40px;
  3305. padding: 0px 15px;
  3306. border-radius: 5px;
  3307. background: var(--chalk);
  3308. border: 1px solid var(--border);
  3309. transition: all linear .3s;
  3310. -webkit-transition: all linear .3s;
  3311. -moz-transition: all linear .3s;
  3312. -ms-transition: all linear .3s;
  3313. -o-transition: all linear .3s;
  3314. }
  3315. .shop-widget-search:focus-within {
  3316. border-color: var(--primary);
  3317. }
  3318. .shop-widget-scroll {
  3319. height: 279px;
  3320. overflow-y: scroll;
  3321. padding-right: 10px;
  3322. }
  3323. .single-banner {
  3324. background-size: cover !important;
  3325. margin-top:70px; margin-bottom:0;
  3326. padding: 100px 0px;
  3327. text-align: center;
  3328. position: relative;
  3329. z-index: 1;
  3330. }
  3331. .single-banner::before {
  3332. position: absolute;
  3333. content: "";
  3334. top: 0px;
  3335. left: 0px;
  3336. width: 100%;
  3337. height: 100%;
  3338. /*background: -webkit-gradient(linear, right top, left top, from(rgba(6, 23, 56, 0.6)), to(rgba(17, 151, 68, 0.6)));
  3339. background: linear-gradient(to left, rgba(6, 23, 56, 0.6), rgba(17, 151, 68, 0.6));*/
  3340. z-index: -1;
  3341. }
  3342. .single-banner h2 {
  3343. font-size: 34px;
  3344. color: var(--black);
  3345. text-transform: uppercase;
  3346. font-weight:700;
  3347. }
  3348. .products_tit {padding: 70px 0px 40px;}
  3349. .products_tit .breadcrumb {padding: 0 1rem 0.75rem 1rem;}
  3350. @media (max-width:991px) {
  3351. .single-banner {
  3352. margin-top:0; padding: 60px 0px;
  3353. }
  3354. .single-banner h2 {
  3355. font-size: 28px;
  3356. margin-bottom: 0;
  3357. }
  3358. .products_tit {padding: 40px 0px;}
  3359. }
  3360. .top-filter {
  3361. display: -webkit-box;
  3362. display: -ms-flexbox;
  3363. display: flex;
  3364. -webkit-box-align: center;
  3365. -ms-flex-align: center;
  3366. align-items: center;
  3367. -webkit-box-pack: justify;
  3368. -ms-flex-pack: justify;
  3369. justify-content: space-between;
  3370. margin-bottom: 25px;
  3371. }
  3372. .filter-short {
  3373. width: 225px;
  3374. display: -webkit-box;
  3375. display: -ms-flexbox;
  3376. display: flex;
  3377. -webkit-box-align: center;
  3378. -ms-flex-align: center;
  3379. align-items: center;
  3380. -webkit-box-pack: center;
  3381. -ms-flex-pack: center;
  3382. justify-content: center;
  3383. }
  3384. .filter-show {
  3385. width: 125px;
  3386. display: -webkit-box;
  3387. display: -ms-flexbox;
  3388. display: flex;
  3389. -webkit-box-align: center;
  3390. -ms-flex-align: center;
  3391. align-items: center;
  3392. -webkit-box-pack: center;
  3393. -ms-flex-pack: center;
  3394. justify-content: center;
  3395. }
  3396. .filter-label {
  3397. font-size: 14px;
  3398. font-weight: 500;
  3399. margin-right: 8px;
  3400. white-space: nowrap;
  3401. text-transform: uppercase;
  3402. }
  3403. .filter-select {
  3404. height: 40px;
  3405. background-color: transparent;
  3406. }
  3407. .filter-select:focus-within {
  3408. border-color: #ced4da;
  3409. }
  3410. .filter-action {
  3411. display: -webkit-box;
  3412. display: -ms-flexbox;
  3413. display: flex;
  3414. -webkit-box-align: center;
  3415. -ms-flex-align: center;
  3416. align-items: center;
  3417. -webkit-box-pack: end;
  3418. -ms-flex-pack: end;
  3419. justify-content: flex-end;
  3420. }
  3421. .filter-action a i {
  3422. width: 40px;
  3423. height: 40px;
  3424. font-size: 16px;
  3425. line-height: 40px;
  3426. border-radius: 50%;
  3427. text-align: center;
  3428. color: var(--text);
  3429. background: transparent;
  3430. }
  3431. .filter-action a i:hover {
  3432. color: var(--primary);
  3433. }
  3434. .filter-action .active i {
  3435. color: var(--white);
  3436. background: var(--primary);
  3437. }
  3438. .filter-action .active i:hover {
  3439. color: var(--white);
  3440. }
  3441. @media (max-width: 575px) {
  3442. .filter-label,
  3443. .filter-action {
  3444. display: none;
  3445. }
  3446. .filter-show {
  3447. width: 80px;
  3448. }
  3449. .filter-short {
  3450. width: 130px;
  3451. }
  3452. }
  3453. .bottom-paginate {
  3454. padding-top: 25px;
  3455. border-top: 1px solid var(--border);
  3456. display: -webkit-box;
  3457. display: -ms-flexbox;
  3458. display: flex;
  3459. -webkit-box-align: center;
  3460. -ms-flex-align: center;
  3461. align-items: center;
  3462. -webkit-box-pack: justify;
  3463. -ms-flex-pack: justify;
  3464. justify-content: space-between;
  3465. }
  3466. .page-info {
  3467. font-weight: 400;
  3468. color: var(--text);
  3469. }
  3470. @media (max-width: 575px) {
  3471. .bottom-paginate {
  3472. margin-bottom: 30px;
  3473. -webkit-box-orient: vertical;
  3474. -webkit-box-direction: normal;
  3475. -ms-flex-direction: column;
  3476. flex-direction: column;
  3477. }
  3478. .page-info {
  3479. margin-bottom: 15px;
  3480. }
  3481. }
  3482. @media (min-width: 576px) and (max-width: 991px) {
  3483. .bottom-paginate {
  3484. margin-bottom: 30px;
  3485. }
  3486. }
  3487. /*========================================
  3488. FAQS PAGE STYLE
  3489. =========================================*/
  3490. .faq-child {
  3491. border-radius: 8px;
  3492. margin-bottom: 30px;
  3493. background: var(--white);
  3494. border: 1px solid #717fa5;
  3495. -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
  3496. box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
  3497. }
  3498. .faq-child:hover .faq-que button {
  3499. color: var(--primary);
  3500. }
  3501. .faq-child:last-child {
  3502. margin-bottom: 0px;
  3503. }
  3504. .faq-que button {
  3505. width: 100%;
  3506. border: none;
  3507. outline: none;
  3508. background: none;
  3509. text-align: left;
  3510. padding: 22px 25px;
  3511. color: var(--black);
  3512. font-size: 18px;
  3513. font-weight: 500;
  3514. transition: all linear .3s;
  3515. -webkit-transition: all linear .3s;
  3516. -moz-transition: all linear .3s;
  3517. -ms-transition: all linear .3s;
  3518. -o-transition: all linear .3s;
  3519. }
  3520. .faq-que span {display:inline-block; margin-right:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:var(--primary); color:var(--white);}
  3521. .faq-ans p {
  3522. font-size: 16px;
  3523. line-height: 26px;
  3524. padding: 20px 25px;
  3525. border-top: 1px solid var(--border);
  3526. }
  3527. .faq-ans span {display:inline-block; margin-right:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:#b1bddd; color:var(--white);}
  3528. /*����*/
  3529. .newitem-part .section-heading {margin-bottom:60px;}
  3530. .mbnr1-part {margin-bottom:140px; background:#3f4146;}
  3531. .mbnr1-part .container {display:flex; width:100%; max-width:1920px; margin:0 auto; padding:0;}
  3532. .mbnr1-part .container > div {width:50%; overflow:hidden}
  3533. .mbnr1-part .container > div > a {display:flex; justify-content:center;}
  3534. .mbnr2-part {margin-bottom:140px;}
  3535. .mbnr2-part .container > div {padding-top:40px; padding-bottom:40px; color:#fff; font-size:15px; font-weight:400; text-align:center;}
  3536. .mbnr2-part strong {display:block; margin-bottom:15px; font-size:40px; font-weight:500;}
  3537. .products-part .product-card {background: var(--white); border: 1px solid #eee; -webkit-box-shadow: 0px 8px 15px 0px rgb(0 0 0 / 10%); box-shadow: 0px 8px 15px 0px rgb(0 0 0 / 10%);}
  3538. .products-part .product-content {padding:20px;}
  3539. .btn_more {padding: 10px 40px; background:var(--black); border:none; border-radius:50px; color:var(--white); font-size:17px;}
  3540. .mlottery-part {padding:80px 0; background:#262d41 url(../images/home/mlottery_bg.png) repeat-x left center;}
  3541. .mlottery-part.section {margin-bottom:0;}
  3542. .mlottery-part .section-heading h2 {color:var(--white); font-family:inherit; font-size:40px; font-weight:500;}
  3543. .mlottery-part .section-heading h2 em {display:block; margin-top: 10px; font-style:normal; color:#b7bac3; font-size:14px; line-height: 1.6;}
  3544. .mlottery-part .product-card {background:none;}
  3545. .mlottery-part .product-image {display:flex; align-items:center; height:220px; margin-bottom:25px; border-radius:10px; overflow:hidden;}
  3546. .mlottery-part .product-name a {color:#f9f9fa; font-weight:700; font-size:18px; line-height:1.1;}
  3547. .mlottery-part .product-price span {color:#96c0fe; font-weight:700; font-size:18px; line-height:1.1;}
  3548. .mlottery-part .product-price {margin-bottom:16px;}
  3549. .mlottery-part button {color:var(--white); font-size:16px; font-weight:500;}
  3550. .mlottery-part .product-content button img {display:inline-block;}
  3551. .shop-part {margin-bottom:25px;}
  3552. .shop-part .product-name {margin-top:15px;}
  3553. .shop-part .product-card {margin-bottom:60px;}
  3554. .shop-part .pricing_box1 {flex:0 0 100%; max-width:100%; text-align:center;}
  3555. /*��ǰ����Ʈ-1*/
  3556. .shop-1-part .row {flex-flow:column wrap;}
  3557. .shop-1-part .product-add {justify-content:center; border-radius:8px;}
  3558. /*�󼼺���*/
  3559. .btn_group {display:flex; justify-content:space-between; align-items:center;}
  3560. /*.btn_group > * {width:33%;}*/
  3561. .item_detail.inner-section {margin-top:30px;}
  3562. .item_detail .container {border-top:1px solid var(--black);}
  3563. .item_detail .nav-tabs {margin-bottom:0; padding: 60px 25px 0px;}
  3564. .detail_rel.inner-section {margin-top:60px; padding-bottom:100px; padding-top:90px; background:#f5f6f7;}
  3565. .detail_rel h2 {font-size:30px; font-family:inherit;}
  3566. .detail_rel .product-label {top:10px; left:10px;}
  3567. .detail_rel .product-wish {top:10px; right:10px;}
  3568. .detail_rel .product-card {margin-bottom:40px;}
  3569. .detail_rel .product-image:after {background:none;}
  3570. .detail_rel .product-content {padding:10px;}
  3571. .detail_rel .product-action button i {background:#ccc;}
  3572. .detail_rel .product-action button i:hover {background:var(--black);}
  3573. .details-gallery .slick-slide {height:auto;}
  3574. /*���ø���Ʈ*/
  3575. .wishlist-part,
  3576. .checkout-part,
  3577. .invoice-part,
  3578. .profile-part,
  3579. .orderlist-part {padding-bottom:120px;}
  3580. .product-view .btn_group > * {flex:1; width:auto;}
  3581. .product-view .view-add-group {margin:0;}
  3582. .product-view .view-add-group .product-add {align-items: center; justify-content: center; font-size: 14px;margin-left:8px; border-radius: 8px;}
  3583. /*����*/
  3584. .checkout-part .order .account-card {padding:0 0 30px; border:none;}
  3585. .checkout-part .btn-inline {border:2px solid var(--black);}
  3586. .invoice-part .alert-info p {margin-top:40px;}
  3587. @media (max-width: 1024px) {
  3588. .navbar-info-group {display:none;}
  3589. }
  3590. @media (max-width: 991px) {
  3591. .header-part {border-bottom:1px solid #c5c6c9;}
  3592. .header-part.active {top:81px;}
  3593. .dropdown-position-list {left:auto; right:0;}
  3594. .dropdown-position-list::before {left:auto; right:30px;}
  3595. }
  3596. @media (max-width: 768px) {
  3597. .header-top .row {justify-content:space-between;}
  3598. .header-top .col-md-7 {width:100%; max-width:none; padding-left:20px; padding-right:20px;}
  3599. .header-top .col-md-12, .header-top .col-md-5 {width:100%; padding-right:10px; padding-left:10px;}
  3600. .mbnr1-part,
  3601. .mbnr2-part {margin-bottom:50px;}
  3602. .mbnr1-part .container {flex-flow:column wrap;}
  3603. .mbnr1-part .container > div {width:100%;}
  3604. .mbnr1-part > div a {justify-content:center;}
  3605. .single-banner {padding-bottom:40px;}
  3606. .products_tit {padding-bottom: 20px;}
  3607. }
  3608. @media (max-width: 767px) {
  3609. .footer-part .container {padding:0;}
  3610. .footer-part .ft_top {padding:0; background:#242222; color:#fff;}
  3611. .footer-part .ft_top .container {max-width:none; flex-flow:row wrap;}
  3612. .footer-part .ft_top .fcc {width:100%;padding:25px 10px;}
  3613. .footer-part .fcc > div {flex:1; width:50%; text-align:center;}
  3614. .footer-part .ft_top .fcc .tel,
  3615. .footer-part .ft_top .online a {color:var(--white);}
  3616. .footer-part .ft_top .fcc em {color: #979696;}
  3617. .footer-part .ft_top .fcc .tel {margin-right:0; border-right:1px solid #333;}
  3618. .footer-part .ft_menu {width:100%; padding:10px 10px; background:var(--white); text-align:center;}
  3619. .footer-part .ft_top .ft_menu a {margin-left:0; margin:0 10px;}
  3620. .footer-part .ft_btm .container {padding:0 20px; text-align:center; word-break:keep-all;}
  3621. .weekly-part.section {margin-bottom:20px;}
  3622. .mbnr2-part strong {margin-bottom: 5px; font-size:30px;}
  3623. .mbnr2-part .container > div {font-size:14px;}
  3624. .product-label {top:10px; right:10px;}
  3625. .label-text {font-size: 13px; padding: 5px 10px;}
  3626. .product-add i, .standard-wish i {display:inherit;}
  3627. .products-part .btn {font-size:15px;}
  3628. .mlottery-part .section-heading h2 {font-size:30px;}
  3629. .mlottery-part {padding:40px 0;}
  3630. .mlottery-part .section-heading h2 em {margin-top:0;}
  3631. .mlottery-part .product-name a,
  3632. .mlottery-part .product-price span {font-size:16px;}
  3633. .mlottery-part .product-image {margin-bottom:15px;}
  3634. .mlottery-part .product-card {margin-bottom:0;}
  3635. .shop-part .product-card {margin-bottom:5px;}
  3636. }
  3637. @media (max-width:480px) {
  3638. .products-part .product-content {padding:10px 0;}
  3639. /*��ǰ��*/
  3640. .shop.detail .btn_group {flex-flow:column wrap;}
  3641. .shop.detail .btn_group > * {width:100%; margin-bottom:8px;}
  3642. }